jquery实现简单文字提示效果
更新时间：2015年12月02日 12:10:32 作者：aochen
这篇文章主要介绍了jquery实现简单文字提示效果的方法,以完整实例形式分析了jQuery插件jquery-1.2.6.pack.js实现文字提示效果的相关技巧,并提供了jquery-1.2.6.pack.js的本站下载地址,需要的朋友可以参考下
本文实例讲述了jquery实现简单文字提示效果。分享给大家供大家参考，具体如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现简单文字提示</title>
<style type="text/css">
#preview{border:2px solid #c7c7c7; background:#e3f4f9; padding:5px; display:none; position:absolute;}
</style>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
</head>
<body>
<a class="preview" title="看看提示出现了没">移到我身上来！！</a>
<script type="text/javascript">
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "" + this.t : "";
$("body").append("<div id='preview'>"+ c +"</div>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>
jquery-1.2.6.pack.js插件点击此处本站下载。
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
2008-10-10
这篇文章主要为大家详细介绍了jQuery制作input提示内容，兼容IE8以上，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
之前写过的方法有缺陷，可以输入空格。现在将空格也屏蔽了。就是在之前的代码里加入了过滤空格的功能。2011-04-04
利用jQuery及AJAX技术定时更新GridView的某一列数据
这篇文章主要介绍了利用jQuery及AJAX技术定时更新GridView的某一列数据的方法,这里的GridView是指C#软件开发中的GridView控件,需要的朋友可以参考下2015-12-12
使用jQuery解决IE与FireFox下createElement方法的差异
使用jQuery解决IE与FireFox下createElement方法的差异。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
这个插件支持任意步骤,具有启动之前函数调用功能，具有完成之后回调功能。2011-07-07
浅谈MVC+EF easyui dataGrid 动态加载分页表格
下面小编就为大家带来一篇浅谈MVC+EF easyui dataGrid 动态加载分页表格。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了jquery果冻抖动效果实现方法,涉及animate方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01![浅谈jQuery中的eq()与DOM中element.[]的区别](//img.jbzj.com/images/xgimg/bcimg8.png)
浅谈jQuery中的eq()与DOM中element.[]的区别
下面小编就为大家带来一篇浅谈jQuery中的eq()与DOM中element.[]的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
图片上下切换效果,学习jquery的朋友可以参考下。2011-03-03
![浅谈jQuery中的eq()与DOM中element.[]的区别](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论