Jquery创建层显示标题和内容且随鼠标移动而移动


Posted in Javascript onJanuary 26, 2014
<script src="Core/Public/js/jquery.js" type="text/javascript"></script> //引入Jquery 
<style type="text/css"> //编写创建的div的样式 
#tooltip 
{ 
position: absolute; 
border: 1px #solid #333; 
background: #f7f5d1; 
padding: 1px; 
color: #333; 
display: none; 
} 
</style> 
<script type="text/javascript"> //编写JS代码 
$(function () { 
var x = 10; 
var y = 10; 
$("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时 
this.myTitle = this.title; 
this.title = ""; 
var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; 
$("body").append(tooltip); 
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); 
}).mouseout(function () { //当鼠标指针从元素上移开时 
this.title = this.myTitle; 
$("#tooltip").remove(); 
}).mousemove(function (e) { //当鼠标指针从元素上移动时 
$("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); 
}); 
}); 
</script> 
//html代码 
<ul> 
<li><a href="#" class="tooltip" title="甜美宽松毛衣">1111111111111</a></li> 
<li><a href="#" class="tooltip" title="是撒啊得瑟得">2222222222222</a></li> 
</ul>
Javascript 相关文章推荐
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
BootStrap的两种模态框方式
May 10 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 #Javascript
JS对象转换为Jquery对象示例
Jan 26 #Javascript
JavaScript原型链示例分享
Jan 26 #Javascript
JS设置获取cookies的方法
Jan 26 #Javascript
js中小数转换整数的方法
Jan 26 #Javascript
javascript中取前n天日期的两种方法分享
Jan 26 #Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 #Javascript
You might like
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
2015/10/27 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
python中元类用法实例
2014/10/10 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python 并发下载器实现方法示例
2019/11/22 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
Django权限设置及验证方式
2020/05/13 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
.NET概念性的面试题
2012/02/29 面试题
机械专业毕业生推荐信范文
2013/11/25 职场文书
写给女朋友的道歉信
2014/01/08 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
九年级政治教学反思
2014/02/06 职场文书
验房委托书
2014/08/30 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
党校毕业个人总结
2015/02/28 职场文书