动网官网-Left-ShowTip效果分析
Posted by Kevin | Filed under Tools/share | 2008-04-25
结合上次写的动网官方网站的-Top-banner效果，这次利用零散时间，剥离出动网的showtip效果。
动网官方网站的-ShowTip如下图：
效果：鼠标挪到图上时，触发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; }
.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
/*核心代码*/
-
2008-04-26, 3:19 PM
晚上来研究一下
2008-04-26, 9:22 PM
下来看看
2008-05-02, 10:02 PM
这个效果不错，只是暂时没时间研究了
2010-04-01, 10:10 AM
dongg