jQuery自制提示框tooltip改进版

前端之家收集整理的这篇文章主要介绍了jQuery自制提示框tooltip改进版前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip!

HTML:

CSS:

Box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}

JQ:

SEOver(function(e){ this.myTitle=this.title;//获取title,临时存储 this.title="";//避免和原生提示重复
  var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
  $("body").append(tooltip);
  //css()设置样式
  $("#tooltip").css({
    "top":(e.pageY+y)+"px",//e.pageX相对与文档,e.clientX相对于可视区
    "left":(e.pageX+x)+"px",}).show("fast");
}).mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut(function(){
  this.title=this.myTitle;//重复恢复
  $("#tooltip").remove();//记得要把<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a>的结点移除掉
}).mousemove(function(e){
  $("#tooltip").css({
    "left":(e.pageX+x)+"px","top":(e.pageY+y)+"px",});
});

});

改进版:

将上面的tooltip内容加上图片预览!

JQ:

SEOver(function(e){ this.myTitle=this.title; this.title=""; var imgTitle=this.myTitle?"
"+this.myTitle+"":""; var tooltip="
产品预览图"+imgTitle+"
"; $("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",}) }); });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/46924.html

猜你在找的jQuery相关文章