利用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 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
js导出txt示例代码
2014/01/14 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python读取excel表格生成erlang数据
2017/08/26 Python
python组合无重复三位数的实例
2018/11/13 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
Python的两道面试题
2013/06/29 面试题
运动会开幕式邀请函
2014/02/03 职场文书
采购求职信
2014/03/17 职场文书
个人自我鉴定总结
2014/03/25 职场文书
员工薪酬激励方案
2014/06/13 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
新手初学Java网络编程
2021/07/07 Java/Android