用DIV+CSS实现的网易首页滑动效果的标签-CSS代码特效

网易首页滑动效果的标签，实现如下效果:
1.定时滑动标签。
2.鼠标滑过触发和鼠标点击触发两种分别实现。

<style> BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; FONT-FAMILY: "宋体", arial; TEXT-ALIGN: left } UL { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } OL { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } LI { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px } H5 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } .clear { CLEAR: both; FONT-SIZE: 1px; VISIBILITY: hidden; WIDTH: 1px } .lineH { FONT-SIZE: 1px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/lineH.gif); MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 750px; HEIGHT: 1px } .area { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg.gif); MARGIN: 0px auto; WIDTH: 750px } .area .col1 { FLOAT: left; WIDTH: 436px } .area .col2 { FLOAT: right; WIDTH: 300px } .scrollWeather { PADDING-RIGHT: 0px; PADDING-LEFT: 8px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px; TEXT-ALIGN: left } .scrollWeather UL { } .scrollWeather LI { FLOAT: left; LIST-STYLE-TYPE: none; TEXT-ALIGN: left } .scrollWeather .s1 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } .scrollWeather .s2 { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #1f3a87; PADDING-TOP: 4px } .leftContent { CLEAR: both } .leftContent .menu { CLEAR: both; HEIGHT: 22px } .leftContent .menu UL { } .leftContent .menu LI { FLOAT: left; CURSOR: pointer; LIST-STYLE-TYPE: none; HEIGHT: 22px } .leftContent .menu LI H6 { PADDING-RIGHT: 0px; PADDING-LEFT: 11px; FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 2px; PADDING-TOP: 6px } .leftContent .menu LI SPAN { PADDING-RIGHT: 8px; PADDING-LEFT: 8px; BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg7.gif) no-repeat 0px 9px; FLOAT: right; PADDING-BOTTOM: 0px; PADDING-TOP: 6px } .leftContent .menu .activeW1 { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1.gif); WIDTH: 218px } .leftContent .menu .normalW1 { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_1.gif); WIDTH: 218px } .leftContent .menu .activeW2 { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_2.gif); WIDTH: 218px } .leftContent .menu .normalW2 { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_1_3.gif); WIDTH: 218px } .leftContent .menuA { CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px } .leftContent .menuA UL { } .leftContent .menuA LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; WIDTH: 109px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none } .leftContent .menuA .active { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2.gif) } .leftContent .menuA .normal { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2_1.gif) } .leftContent .menuA .over { BACKGROUND: url(http://cimg2.163.com/cnews/163/img6/bg5_2_2.gif) } .leftContent .menuB { CLEAR: both; OVERFLOW: hidden; HEIGHT: 22px } .leftContent .menuB UL { } .leftContent .menuB LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 6px; LIST-STYLE-TYPE: none } .leftContent .menuB .active {</body></html>