鼠标浮动文本的实现
2016-06-24 11:46
295 查看
</pre>鼠标浮动文本:页面添加div:<pre name="code" class="html"><div id="titie" style="position: absolute; top: 500px; width: auto; background-color: #E7F3FF; display: none; z-index: 100000; border: 1px solid #e1e3e4; padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;"> </div>
显示div:
function CreateDiv(val) { var e = window.event // //这里可得到鼠标X坐标 var pointX = e.pageX; //这里可以得到鼠标Y坐标 var pointY = e.pageY; $("#titie").css("top", pointY + 20); $("#titie").css("margin-left", pointX); $("#titie").html("<span>" + val + "</span>"); $("#titie").show(); }
隐藏div:
function RemoveDiv(val) { $("#titie").hide(); }
添加元素对应的鼠标事件:
<span onmouseover="CreateDiv(' " + content + "')" onmouseout="RemoveDiv('" + content + "')"> + content + </span>;
相关文章推荐
- 系统服务
- svn服务器出现网页能登陆库访问,但tortoise无法登陆
- IDEA 15 java -source问题
- 第十六周项目一(1)-小玩文件
- 学期总结
- 使用面向对象对XML进行解析:dom和dom4j的用法
- JavaIO(04)字符流--Writer and Reader
- jquery表单插件Autotab使用方法详解
- MySQL:内联视图与标量子查询
- 编写一个程序,打印输入中单词长度的直方图
- Winform 安装与布署
- UI控件之Date & Time组件(下)
- 文件下载
- spark MySQL jar 包
- iOS:如何优雅的让UITextView根据输入文字实时改变高度
- 工厂模式之--工厂方法模式
- js中window.open()的所有参数详细解析
- 程序员应该知道的七个图形工具
- memadmin搭建教程
- Java进阶(三十一) Web服务调用