Jun
28
见到不少的游戏网站上都有鼠标悬停显示提示内容的效果
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：
代码如下：
样式----------------------------------
JS脚本----------------------------------
HTML代码------------------------------
这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。
今天，我也用jQuery来打造一个tips提示效果
JQ库选用的是最新版本，1.4.2版，jquery-1.4.2.min.js
效果图如下：
代码如下：
样式----------------------------------
<style type="text/css">
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:210px; }
.tool-title{ width:210px; font-size:13px; float:left; margin: 0; color:#FF0; text-align: center; border-bottom:1px #000 dashed; padding: 9px 0px 4px; background: url(tilps.png) top left; }
.tool-text{ padding: 8px 8px 8px; width:194px; float:left; height:auto; font-size:12px; color: #cf9; background: url(tilps.png) bottom right;}
.tool-tips img{ width:50px; height:50px; float:left; margin:0; padding:2; border:1px #666 solid;}
.tool-tips dl{ width:130px; padding-left:10px; line-height:20px; height:80px; float:left; margin:0;}
</style>
.tool-tips{ position: absolute; visibility: hidden; z-index: 13000; color: #fff; width:210px; }
.tool-title{ width:210px; font-size:13px; float:left; margin: 0; color:#FF0; text-align: center; border-bottom:1px #000 dashed; padding: 9px 0px 4px; background: url(tilps.png) top left; }
.tool-text{ padding: 8px 8px 8px; width:194px; float:left; height:auto; font-size:12px; color: #cf9; background: url(tilps.png) bottom right;}
.tool-tips img{ width:50px; height:50px; float:left; margin:0; padding:2; border:1px #666 solid;}
.tool-tips dl{ width:130px; padding-left:10px; line-height:20px; height:80px; float:left; margin:0;}
</style>
JS脚本----------------------------------
<script> $(document).ready(function(){ $('<div class="tool-tips"><div class="tool-title"></div><div class="tool-text"></div></div>').appendTo('body'); $('a').mouseover(function(){ $(this).css('cursor','pointer'); $('.tool-tips').css('visibility','visible'); var xixu = this; if(xixu.title){xixu.yishi=xixu.title;xixu.title='';} var dual = xixu.yishi.split('::'); if(dual.length>1){ myTitle = dual[0]; myText = dual[1]; }else{ myTitle = $(this).text(); myText = xixu.yishi; } $('.tool-title').html(myTitle); $('.tool-text').html(myText); }).mousemove(function(e){ $('.tool-tips').css('top',e.pageY-15); $('.tool-tips').css('left',e.pageX+15); }).mouseout(function(){ $('.tool-tips').css('visibility','hidden'); }) }) </script>
HTML代码------------------------------
<p><a href="#" title="这是我的超链接提示1.">《大师的》</a></p>
<p><a href="#" title="这是我的超链接提示2.">《特别的》</a></p>
<p><a href="#" title="<img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl>">《传说中的一世》</a></p>
<p><a href="#" title="<img src=x.jpg><dl>他可是U9上的大红人哦，在DOTA界名声可是响当当啊。</dl>">《额外哦》</a> </p>
<p><a href="#" title="这是我的超链接提示2.">《特别的》</a></p>
<p><a href="#" title="<img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl><img src=71275918163.jpg><dl>红色战队的主力成员,红色战队的主力成员红色战队的主力成员.</dl>">《传说中的一世》</a></p>
<p><a href="#" title="<img src=x.jpg><dl>他可是U9上的大红人哦，在DOTA界名声可是响当当啊。</dl>">《额外哦》</a> </p>
这也就是利用了JQ全局对“A”标签的搜索，来获取title属性以及a标签内文本内容，都会转化成HTML格式。
而tips提示效果的背景是一个PNG的半透明图片，这样在IE6这个浏览器下就不能透明了，其它主流浏览器都没有问题，解决办法是有，但是不在本文范围内，不多讲。
然后title里面的内容也有限制，尽量还是少放内容。
这个效果在会员列表、商品列表、游戏道具等地方将发挥比较大的作用，普通JS也可以达到这个效果，但是就一个项目的整体来说，还是建议选用jQuery，集成化较好。
相比较flash的tips类，JQ正在超越。无论元素的丰富度、易用度、以维护性，都可以看出JQ的优越。
js 时间倒计时代码
JQ来打造网站图片延迟载
