//这是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的内容换成图片，就形成了图片的悬浮效果
努力学习.....
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持北冥有鱼！
您可能感兴趣的文章:
- jQuery鼠标悬停内容动画切换效果
- jQuery实现鼠标悬停3d菜单展开动画效果
- jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
- jQuery实现鼠标悬停显示提示信息窗口的方法
- 基于jQuery创建鼠标悬停效果的方法
- jQuery实现的感应鼠标悬停图片色彩渐显效果
- 分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
- jQuery实现列表自动循环滚动鼠标悬停时停止滚动
- jQuery当鼠标悬停时放大图片的效果实例
- jquery鼠标悬停导航下划线滑出效果
