利用jQuary实现文字浮动提示效果示例代码


Posted in Javascript onDecember 26, 2013
<html> 
<head> 
<meta charset="utf-8"/> 
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script> 
<script> 
/*文字提示*/ 
/* 
(1)鼠标移入的时候,创建一个div它的内容是title属性的值 
(2)规定位置,设置css样式 
(3)鼠标移出的时候,移除div 
(4)鼠标移动的时候,X Y轴的坐标要相应的变化 
*/ 
$(function(){ 
var x = 7; 
var y = 8; 
$("a.tip").hover(function(){ 
var title = this.title; 
var $div = $("<div id='newTip'>"+title+"</div>"); 
$("body").append($div); 
$div.css({"position":"absolute","background":"pink"}); 
},function(){ 
$("#newTip").remove(); 
}).mousemove(function(e){ 
var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); 
}); 
}) 
</script> 
</head> 
<body> 
<a href="#" class="tip" title="这是我的提示">这是我的提示</a> 
</body> 
</html>
Javascript 相关文章推荐
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
分享Javascript实用方法二
Dec 13 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue-cli3 karma单元测试的实现
Jan 18 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
js几秒以后倒计时跳转示例
Dec 26 #Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 #Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 #Javascript
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 #Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 #Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 #Javascript
JS获取select-option-text_value的方法
Dec 26 #Javascript
You might like
实用函数7
2007/11/08 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
利用Python写一个爬妹子的爬虫
2018/06/08 Python
详解Python中is和==的区别
2019/03/21 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python 实现任务管理清单案例
2020/04/25 Python
Django-imagekit的使用详解
2020/07/06 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
村级四风对照检查材料
2014/08/24 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android