本来是想用一些现成的插件的，找了几个都比较复杂，我就想实现一个小小的效果，并不需要太复杂，所以最终打算自己写一个！ 　　实现效果：鼠标放到文字上面，出现小提示框！ 效果截图： 测试结果：火狐，ＩＥ６/７/８下面通过 　　说明，没有做参数定制，以后可能会完善，大家要改显示效果的话，直接调整ＪＳ里面的ＣＳＳ样式即可！欢迎高手指教！ 　　代码 复制代码 代码如下: (function($){ $.fn.JNToolTips=function(){ var div = document.createElement("div"); div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute' div.onclick=function(){$(div).remove();}; $(this).mouseover(function(e){ if(!e){e=window.event;} div.innerHTML= $(this).attr("title"); $(this).attr("title",""); var doc = document.documentElement ? document.documentElement : document.body; div.style.left=(e.clientX+doc.scrollLeft + 5)+"px"; div.style.top=(e.clientY+doc.scrollTop + 5)+"px"; document.body.appendChild(div); }).mouseout(function(){ $(this).attr("title",div.innerHTML); $(div).remove(); }); } })(jQuery); 使用方法： 复制代码 代码如下: $(document).ready(function(){ $("a").JNToolTips(); });

　　推荐阅读

　　js 关于=+与+=日期函数使用说明(赋值运算符)

var s=+newDate(); 解释如下:=+是不存在的; +new Date()是一个东西; +相当于.valueOf(); 看到回复补充一下.getTime()这个也是得到毫秒数 复制代码 代码如下: //4个结果一样返回当前时间的毫秒数 alert(+new Date()>>>详细阅读

本文标题：ToolTips JQEURY插件之简洁小提示框效果

地址：http://www.17bianji.com/kaifa2/JS/23916.html

 1/2    1