基于jquery实现的鼠标悬停提示案例
更新时间:2016年12月11日 16:27:59 作者:猫爷°
本文主要介绍了基于jquery实现的鼠标悬停提示的详细案例。代码全面,功能实用,需要的朋友可以参考借鉴
//这是JS里的代码MOMO.js
因为刚学封装JQUERY插件 所以就做的稍微麻烦一点,其实在前台页面直接就可以用mouseover,mouseout,mousemove三个事件就行了
(function ($) { $.fn.extend({ "titleOver": function (e) { this[0].myTitle = this[0].title; this[0].title = ""; //创建div元素 var tooltip = "<div id='tooltip' style='border:1px solid #000000;width:auto;position:absolute;'>" + this[0].myTitle + "</div>" $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show('fast'); }, "titleOut": function () { this[0].title = this[0].myTitle; $("#tooltip").remove(); }, "titleMove": function (e) { $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); } }); //默认鼠标坐标 var x = 10; var y = 20; })(window.jQuery);
前台的页面:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JqueryDemo</title> <script type="text/javascript" src="script/jquery-1.8.3.js"></script> <script type="text/javascript" src="script/MOMO.js"></script> <script type="text/javascript"> $(function () { $("a").mouseover(function (e) { $(this).titleOver(e); }).mouseout(function () { $(this).titleOut(); }).mousemove(function (e) { $(this).titleMove(e); }); }); </script> </head> <body> <a href="#" title="这是一个链接">这是一个链接^_^!</a> </body> </html>
运行效果:
当然还可以把DIV的内容换成图片,就形成了图片的悬浮效果
努力学习.....
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
这篇文章主要介绍了详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题 的相关资料,需要的朋友可以参考下2015-12-12扩展jquery easyui tree的搜索树节点方法(推荐)
下面小编就为大家带来一篇扩展jquery easyui tree的搜索树节点方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-10-10利用jQuery及AJAX技术定时更新GridView的某一列数据
这篇文章主要介绍了利用jQuery及AJAX技术定时更新GridView的某一列数据的方法,这里的GridView是指C#软件开发中的GridView控件,需要的朋友可以参考下2015-12-12
最新评论