结合上次写的动网官方网站的-Top-banner效果,这次利用零散时间,剥离出动网的ShowTip效果。

动网官方网站的-ShowTip如下图:

dvbbs_showtip.gif - 大小: 13.68 KB - 尺寸: 297 x 270 - 点击打开新窗口浏览全图

效果:鼠标挪到图上时,触发hover,弹出透明效果的栏目提示。
功能:适合分类栏目介绍,显得大气和精致。

下面来分析一下XHTML代码和CSS样式:

.leftcontent2 ul { margin:0px; padding:0px; list-style:none; }
.leftcontent2 ul li img { border:1px solid #ddd; background:#fff; padding:3px; float:left; margin:0px 6px 5px 0px}
.leftcontent2 ul li span {color:#333; margin-left:10px; .test, .test2 { position:relative; color:#0000cc; z-index:98; text-decoration:none;font-size:12px; }
.test2{z-index:96;}
.test:hover, .test2:hover { background:none; }
.test span, .test2 span { display: none;}
.test:hover span, .test2:hover span { display:block;position:absolute; top:52px !important; *top:-7px !important; top:-7px; z-index:99; left:-270px; border-bottom:4px solid #eee;border-right:4px solid #eee; filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; }
.test2:hover span {top:108px !important; *top:49px !important;top:49px; z-index:97;}
.test:hover span p, .test2:hover span p { border:1px solid #8DA1AE;background:#fff;color:#000;padding:5px;text-align:left;font-size:12px; width:260px; margin:0px; }
核心代码就是上边的。可以看出来,span(栏目介绍)默认是不显示的即display: none;,当触发类为test和test2的链接,鼠标挪到链接区域内时,span属性改为display:block;显示出来。通过top和left属性来控制位置,z-index来控制层次。最后加上filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; 

来实现各个浏览器的透明。filter:alpha(opacity=90);为IE样式,-moz-opacity: 0.9;为Firefox样式, opacity: 0.9;为Opera等高级浏览器样式


大家可以看到整个过程没有什么高明之处,但是思路却很好,代码也简洁和高效。

点击访问效果页面

点击下载完整源码包:uu-dvbbs-showtip.rar

附件

uu-dvbbs-showtip.rar (19.75 KB, 下载次数:1686, 上传时间:2008-04-25 22:48)