首页 > 开发 > JS > 正文

jquery悬浮提示框完整实例

2024-05-06 16:27:46
字体:
来源:转载
供稿:网友
这篇文章主要介绍了jquery悬浮提示框实现方法,涉及jQuery鼠标事件响应及页面元素样式的动态操作技巧,需要的朋友可以参考下
 

本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考,具体如下:

<html><head><script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript">    $(function() {      x = 5;      y = 15;      $("p").hover(function(e) {        otitle = this.title;        this.title = "";        var ndiv = "<div id='leo'>" + otitle + "</div>";        $("body").append(ndiv);        $("#leo").css({          "top" : (e.pageY + y) + "px",          "left" : (e.pageX + x) + "px"        }).show(2000);        $(this).mousemove(function(e) {          $("#leo").css({            "top" : (e.pageY + y) + "px",            "left" : (e.pageX + x) + "px"          }).show(1000);        });      }, function() {        this.title = otitle;        $("#leo").remove();      });    });  </script>  <style type="text/css">    #leo {      position: absolute;      border: 1px solid grey;      opacity: 0.8;      background: grey;    }  </style></head><body>  <p  <p  <p  <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p></body></html>

希望本文所述对大家jQuery程序设计有所帮助。



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表