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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
javascript 强制刷新页面的实现代码
Dec 13 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
vue使用video插件vue-video-player详解
Oct 23 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
destoon各类调用汇总
2014/06/20 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jquery使用经验小结
2015/05/20 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
laydate日历控件使用方法详解
2017/11/20 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python实现简单飞行棋
2020/02/06 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
《童趣》教学反思
2014/02/19 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
年度考核自我鉴定
2014/03/19 职场文书
创建青年文明号材料
2014/05/09 职场文书
教师求职信
2014/06/17 职场文书
2015年度党员个人总结
2015/02/14 职场文书
教师思想工作总结2015
2015/05/13 职场文书
体育教师教学随笔
2015/08/15 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js