首页 > 编程 > JavaScript > 正文

jquery悬浮提示框完整实例

2019-11-20 10:48:35
字体:
来源:转载
供稿:网友

本文实例讲述了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 title="1dfgfdgdfg">If you click on me, I will disappear.</p>  <p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>  <p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>  <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p></body></html>

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表