快捷導(dǎo)航

jquery懸浮提示框完整實(shí)例

更新時(shí)間：2016年01月13日 16:29:26 作者：xpsharp

這篇文章主要介紹了jquery懸浮提示框?qū)崿F(xiàn)方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁(yè)面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery懸浮提示框?qū)崿F(xiàn)方法。分享給大家供大家參考，具體如下：

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery拖動(dòng)圖片刪除示例
存儲(chǔ)的是被拖動(dòng)的圖片的初始坐標(biāo)，為兩個(gè)變量設(shè)置被拖動(dòng)圖片的初始坐標(biāo)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的橫向二級(jí)導(dǎo)航效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)導(dǎo)航出現(xiàn)下拉菜單切換的效果,非常簡(jiǎn)潔自然,涉及jquery鼠標(biāo)hover事件及頁(yè)面元素樣式的動(dòng)態(tài)改變技巧,需要的朋友可以參考下
2015-08-08
jquery中EasyUI使用技巧小結(jié)
這篇文章主要介紹了jquery中EasyUI使用技巧小結(jié),都是些個(gè)人經(jīng)驗(yàn)，分享給大家，需要的朋友可以參考下
2015-02-02
程序員必知35個(gè)jQuery 代碼片段
jQuery如今已經(jīng)成為Web開(kāi)發(fā)中最流行的JavaScript庫(kù)，通過(guò)jQuery和大量的插件，你可以輕松實(shí)現(xiàn)各種絢麗的效果。本文將為你介紹一些jquery實(shí)用的技巧，希望可以幫助你更加高效地使用jQuery。
2015-11-11
jquery實(shí)現(xiàn)簡(jiǎn)單的banner輪播效果【實(shí)例】
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)簡(jiǎn)單的banner輪播效果【實(shí)例】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-03-03
jQuery is()函數(shù)用法3例
這篇文章主要介紹了jQuery is()函數(shù)用法3例,jQuery的is()函數(shù)其實(shí)是非常有用的，能不能用好直接決定你的代碼是否高效,需要的朋友可以參考下
2014-05-05
利用jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)按鈕效果（附demo源碼下載）
這篇文章主要介紹了利用jQuery實(shí)現(xiàn)滑動(dòng)開(kāi)關(guān)按鈕效果，文中給出了詳細(xì)的介紹，并在文末給出了完整的demo源碼下載，有需要的朋友可以參考簡(jiǎn)介，下面來(lái)一起看看吧。
2017-02-02
使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法
這篇文章主要介紹了使用jQuery給Table動(dòng)態(tài)增加行、清空table的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼
這篇文章介紹了jquery ui dialog實(shí)現(xiàn)彈窗特效的思路及代碼，有需要的朋友可以參考一下
2013-08-08
jquery實(shí)現(xiàn)聊天機(jī)器人
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)聊天機(jī)器人，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02