CSS文章列表滑动门:混排、文字、滚动效果

　　这是一款综合的CSS滑动门特效代码，在滑动门里包含列表、包含图文混排、包含文字滚动，其中任意一个都是我们常用的，综合运用这些功能才能做出更炫丽、符合标准的网页来。

　　注：本特效的代码没有经过优化，仅为了表现功能，如果要用到你的网页话，可以摘录需要的部分。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<title>一个综合的滑动门特效代码 - Liehuo.Net</title> <style> .tabBox { display: none; } .kind { height:270px; } .kindTabs { width:238px; height:30px; background:url("") repeat-x; border-right:#99CEEE 1px solid; overflow:auto; } .kindTabs ul { margin:0; padding:0; list-style:none; } .kindTabs li { float:left; line-height:30px; text-align:center; } .kindTabs li a { float:left; width:79px; height:30px; font:12px/1.2em Tahoma; color:#333; line-height:30px; background:url("/jscss/demoimg/201007/playbill_tab_current.jpg"); text-decoration:none; } .kindTabs li a:hover,.kindTabs li a.current { font:bold 12px/1.2em Tahoma; color:#069; line-height:30px; background:url("/jscss/demoimg/201007/playbill_tab_select.jpg"); text-decoration:none; } .kindTabs .title { width:66px; height:21px; background:url("") no-repeat center; } .kind .tabBody { width:238px; height:249px; border-left:#99CEEE 1px solid; border-right:#99CEEE 1px solid; border-bottom:#99CEEE 1px solid; overflow:auto; } /*tab kind content*/ .playbillHot { width:218px; height:23px; color:#069; line-height:23px; text-indent:10px; background:#F1FCFE; border:#99CEEE 1px solid; } .playbillList { padding:5px 0; width:220px; height:199px; color:#666; line-height:22px; text-align:left; overflow:hidden; } .playbillList span.BC90 { color:#C90; } .playbillList span.BF09 { color:#F09; } .playbillList span.B990 { color:#990; } .playbillList span.BF60 { color:#F60; } .playbillList span.B069 { color:#069; } .newsMarket { margin:0 auto; width:220px; } .newsMarket a { font-size:12px; width:220px; height:24px; color:#666; line-height:24px; text-indent:10px; text-align:left; background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat; border-bottom:#CCC 1px dotted; text-decoration:none; overflow:hidden; display:block; } .newsMarket a:hover { color:#069; background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat; border-bottom:#069 1px dotted; text-decoration:none; } .newsTopicPic th,.newsTopicPic td { padding:5px 0; vertical-align:top; } .newsTopicPic th a img { padding:3px; width:60px; height:60px; border:#CCC 1px solid; } .newsTopicPic th a:hover img { padding:3px; width:60px; height:60px; border:#F90 1px solid; } .newsTopicPic td { color:#999; line-height:18px; text-align:left; } .newsTopicPic td span a { font:12px Tahoma; color:#069; line-height:18px; text-decoration:none; } .newsTopicPic td span a:hover { color:#069; text-decoration:underline; } .newsTopicPic td a { color:#333; text-decoration:underline; } .newsTopicPic td a:hover { color:#F00; text-decoration:underline; } .newsTopicTxt { margin:0 auto; width:220px; } .newsTopicTxt a { width:220px; height:24px; color:#666; line-height:24px; text-indent:10px; text-align:left; background:url("/jscss/demoimg/201007/dot_arrow_1.jpg") 0 8px no-repeat; border-bottom:#CCC 1px dotted; text-decoration:none; overflow:hidden; display:block; } .newsTopicTxt a:hover { color:#069; background:url("/jscss/demoimg/201007/dot_arrow_2.jpg") 0 8px no-repeat; border-bottom:#069 1px dotted; text-decoration:none; } .vsList { margin-top:10px; } .vsList td { width:120px; color:#666; text-align:center; } .vsList td a img { padding:4px; width:110px; height:80px; border:#AECFE3 1px solid; } .vsList td a:hover img { width:110px; height:80px; border:#FC0 1px solid; } .vsList td a { color:#666; line-height:20px; } .vsList td a:hover { color:#069; } </style> <script language="javascript"> /** * 切换TabSheet */ function switchCell(tab, n) { tab=document.getElementsByName(tab); for(i=0;i<tab.length;i++) tab.item(i).className="tabBox"; tab.item(n).className=""; } </script> <div class="kind"> <div id="tabs1" class="kindTabs"> <ul> <li><a href="http://www.baidu.com" onMouseMove="switchCell('tab1',0)">tabsheet1</a></li> <li><a href="#" onMouseMove="switchCell('tab1',1)">tabsheet2</a></li> <li><a href="#" onMouseMove="switchCell('tab1',2)">中文Sheet</a></li> </ul> </div> <div class="tabBody"> <div name="tab1" id="tab1"> <table width="220" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td height="5"></td> </tr> <tr> <td valign="top" height="234"> <div class="newsMarket"> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> <li><a title="title" href="#">中文标题中文标题中文标题中文标题</a></li> </div> </td> </tr> </table> </div> <div name="tab1" id="tab1" class="tabBox"> <table width="220" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td> <table width="220" border="0" cellpadding="0" cellspacing="0" class="newsTopicPic"> <tr> <th width="80"><a href="#"><img src="/jscss/demoimg/wall_s7.jpg" width="346" height="191" /></a></th> <td> <span><a href="#">我和我的祖国：猪倌变状元</a></span><br /> 中国成立以来，政府部门顺应民心出台一系列政策…… <a href="/article//0908/24/1508117116.html">[全文]</a> </td> </tr> </table> </td> </tr> <tr> <td> <div class="newsTopicTxt"> <li><a title="Title" href="#">我和我的祖国：通信大跨越</a></li> <li><a title="title" href="#">我和我的祖国：粮食产量翻5倍</a></li> <li><a title="title" href="#">我和我的祖国：农机改变人民</a></li> <li><a title="title" href="#">我和我的祖国：魏会信的自述</a></li> </div> </td> </tr> </table> </div> <div name="tab1" id="tab1" class="tabBox"> <table width="220" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td height="5"></td> </tr> <tr> <td height="25"> <div class="playbillHot"><li><a title="#" href="#">电视剧《狙击手》专题</a></li></div> </td> </tr> <tr> <td valign="top"> <div class="playbillList"> <marquee direction="up" scrollAmount="2" onmouseover=this.stop() onmouseout=this.start() > 滚动<br /> 滚动<br /> 滚动<br /> 滚动<br /> 滚动<br /> 滚动<br /> </marquee> </div> </td> </tr> </table> </div> </div> </div> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!