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 继承实现例子
Aug 12 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
微信小程序联网请求的轮播图
Jul 07 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
js实现搜索栏效果
Nov 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
PHP中for循环语句的几种变型
2007/03/16 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
微信自定义分享php代码分析
2016/11/24 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
javascript add event remove event
2008/04/07 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python3人脸识别的两种方法
2019/04/25 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
浅谈react路由传参的几种方式
2021/03/23 Javascript
《都江堰》教学反思
2014/02/07 职场文书
导师推荐信范文
2014/05/09 职场文书
年检委托书
2014/08/30 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP