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中关于indexOf的使用方法与问题小结
Aug 05 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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连接SQLServer2005方法及代码
2013/12/26 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
SVG实现时钟效果
2018/07/17 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
接口可以包含哪些成员
2012/09/30 面试题
服务标语大全
2014/06/18 职场文书
2014年教学工作总结
2014/11/13 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android