基于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的内容换成图片，就形成了图片的悬浮效果
努力学习.....
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍基于jQuery创建鼠标悬停效果的方法，包括了基于jQuery创建鼠标悬停效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了基于jQuery创建鼠标悬停效果的方法。分享给大家供大家参考。具体实现方法如下： 1. 创建HTML： 2. 选择.mainnav的class： 3. 建立变量imgPath，指定图片SRC： 4. 找到字符串off，用on替换： 希望本文所述对
-
本文向大家介绍jquery实现鼠标悬浮弹出气泡提示框，包括了jquery实现鼠标悬浮弹出气泡提示框的使用技巧和注意事项，需要的朋友参考一下 jquery鼠标悬浮弹出气泡提示框，供大家参考，具体内容如下 居中的图片 代码 我在网上找了很多例子都是单独的一个，所以我修改了jquery的一点代码，让它可以在一个页面上多次使用，原文的地址我没找到，相信我这个会更好一点。 //别忘了导入js文件！ 以上就是
-
本文向大家介绍jquery实现鼠标悬浮停止轮播特效，包括了jquery实现鼠标悬浮停止轮播特效的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： 一、主体程序 二、CSS样式 三、jQuery程序 先说一下鼠标悬浮图片轮播停止的原理： 1、当鼠标悬浮在框架上方时，清除定时器即用cle
-
问题内容： libgdx中是否有任何侦听器可以让我检测到鼠标悬停而不是鼠标悬停。在场景2D的按钮类中，您有2种方法isOver和isPressed，但是它们执行相同的操作…还有其他问题吗？还有另一种方法来检测鼠标悬停在actor上吗？ 问题答案： 还有的可以连接到和它提供的事件，如下面的： 该事件从根本上来说意味着鼠标开始悬停在角色上，意味着它“离开”了角色的区域。它还有一个事件，您可以使用该事件
-
问题内容： 有时，我可以选择使用CSS元素：悬停或JavaScript onmouseover来控制页面上html元素的外观。考虑以下情况，其中div包装了输入 我希望输入将鼠标光标悬停在div上时更改背景色。CSS方法是 JavaScript方法是 每种方法的优点和缺点是什么？CSS方法是否适用于大多数Web浏览器？JavaScript比CSS慢吗？ 问题答案： ：hover的问题是IE6仅在链
-
本文向大家介绍Angular4实现鼠标悬停3d倾斜效果，包括了Angular4实现鼠标悬停3d倾斜效果的使用技巧和注意事项，需要的朋友参考一下 Angular 是什么 Angular 是由谷歌开发与维护一个开发跨平台应用程序的框架，同时适用于手机与桌面。 Angular 有什么特点 基于 Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动 Web 应用、移动应用和桌面应用等