当前位置：首页 > 资讯 > 技术文档

基于jquery实现的鼠标悬停提示案例

时间：2022-11-29 20:38 编辑：来源：阅读：
扫一扫，手机访问

摘要：基于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);

[b] 前台的页面:[/b]

<!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>

[b]运行效果:[/b] [img]http://files.jb51.net/file_images/article/201612/2016121116324738.gif[/img] 当然还[b]可以把DIV的内容换成图片，就形成了图片的悬浮效果[/b] 努力学习..... 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：Jquery中的层次选择器与find()的区别示例介绍
下一篇：jQuery的remove()方法使用详解

资讯排行榜
更多>>