jquery鼠标悬停动态显示提示文字或者图片
工具/原料
adobedreamweaver
方法/步骤
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<center><ahref="javascript:"id="ahover"tooltips="这里是hover的tips">鼠标滑过自动显示</a><ahref="#"id="aclick"tooltips="<imgsrc='a.png'>">点击显示提示信息</a></center>
4、书写css代码跷孳岔养。<style>*{margin:0;padding:0;}bo颊俄岿髭dy{padding:200px;font-size:12px;background-color:#f0f0f0;}.tooltips{border-width:1px;border-style:solid;position:absolute;display:none;border-radius:3px;opacity:0;filter:alpha(opacity=0);z-index:999;}.tooltipsp.content{padding:5px;}.tooltips.triangle-front,.tooltips.triangle-back{width:0;height:0;overflow:hidden;border-width:8px;border-style:solid;position:absolute;border-color:transparent;top:100%;left:50%;margin-left:-8px;}.tooltips.triangle-back{margin-top:-1px;}.yellow{border-color:#c7c08d;background-color:#fffac3;}.yellow.triangle-front{border-top-color:#c7c08d;}.yellow.triangle-back{border-top-color:#fffac3;}a{padding:5px;margin-right:20px;border:1pxsolid#cc00dd;}</style>
5、书写并添加js蜣贺鱿柢代码。<scriptsrc="jquery-1.10.2.min.js"></script><scri禊诬娱飑pt>$.fn.extend({ hoverTips:function(){ varself=$(this); varsw=self.get(0).switch; if(!sw){ sw=true; varcontent=self.attr("tooltips"); varhtmlDom=$("<divclass='tooltips'>") .addClass("yellow") .html("<pclass='content'></p>" +"<pclass='triangle-front'></p>" +"<pclass='triangle-back'></p>"); htmlDom.find("p.content").html(content); } self.on("mouseover",function(){ $("body").append(htmlDom); varleft=self.offset().left-htmlDom.outerWidth()/2+self.outerWidth()/2; vartop=self.offset().top-htmlDom.outerHeight()-parseInt(htmlDom.find(".triangle-front").css("border-width")); htmlDom.css({"left":left,"top":top-10,"display":"block"}); htmlDom.stop().animate({"top":top,"opacity":1},300); }); self.on("mouseout",function(){ vartop=parseInt(htmlDom.css("top")); htmlDom.stop().animate({"top":top-10,"opacity":0},300,function(){ htmlDom.remove(); sw=false; }); }); }, clickTips:function(){ varself=$(this); varsw=self.get(0).switch; if(!sw){ sw=true; varcontent=self.attr("tooltips"); varhtmlDom=$("<divclass='tooltips'>") .addClass("yellow") .html("<pclass='content'></p>" +"<pclass='triangle-front'></p>" +"<pclass='triangle-back'></p>"); htmlDom.find("p.content").html(content); } self.on("click",function(){ $("body").append(htmlDom); varleft=self.offset().left-htmlDom.outerWidth()/2+self.outerWidth()/2; vartop=self.offset().top-htmlDom.outerHeight()-parseInt(htmlDom.find(".triangle-front").css("border-width")); htmlDom.css({"left":left,"top":top-10,"display":"block"}); htmlDom.stop().animate({"top":top,"opacity":1},300,function(){ setTimeout(function(){ htmlDom.stop().animate({"top":top-10,"opacity":0},300,function(){ htmlDom.remove(); sw=false; }) },2000) }); }) }});$("#ahover").hoverTips();$("#aclick").clickTips();</script>
6、代码整体结构。
7、查看效果。
