成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

自帶的title的提示效果的響應(yīng)速度是非常緩慢的，使用jQuery自制提示tooltip！

HTML:

<p><a  title="超鏈接提示1" class="tooltip">提示1</a></p>
<p><a  title="超鏈接提示2" class="tooltip">提示2</a></p>
<p><a  title="自帶超鏈接提示1">自帶超鏈接提示1</a></p>
<p><a  title="自帶超鏈接提示2">自帶超鏈接提示2</a></p>

CSS:

  p a{display: block;width:150px;height:50px;line-height:50px;
    background:#FF3366;color:#fff;border-radius: 3px;text-align: center;}
  #tooltip{position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc;text-align: center;box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}

JQ:

$(function(){
    var x=10,y=20;//使得鼠標相對于tooltip偏離的距離
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;//獲取title，臨時存儲
      this.title="";//避免和原生提示重復(fù)

      var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
      $("body").append(tooltip);
      //css()設(shè)置樣式
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",//e.pageX相對與文檔，e.clientX相對于可視區(qū)
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;//重復(fù)恢復(fù)
      $("#tooltip").remove();//記得要把生成的結(jié)點移除掉
    }).mousemove(function(e){
      $("#tooltip").css({
        "left":(e.pageX+x)+"px",
        "top":(e.pageY+y)+"px",
      });
    });
  });

改進版：將上面的tooltip內(nèi)容加上圖片預(yù)覽！

JQ:

$(function(){
    var x=10,y=20;
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;
      this.title="";
      var imgTitle=this.myTitle?"<br/><span id='tooltipspan'>"+this.myTitle+"</span>":"";
      var tooltip="<div id='tooltip'><img src='http://www.gimoo.net/t/1901/5c3c41821a831.html"+this.href+"' alt='產(chǎn)品預(yù)覽圖'/>"+imgTitle+"</div>";
      $("body").append(tooltip);
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;
      $("#tooltip").remove();
    }).mousemove(function(e){
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      })
    });
  });

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網(wǎng)。