怎么实现这种效果
日期：2014-05-17 浏览次数：21111 次
如何实现这种效果
如何实现像下面这个网站中部“焦点”栏目里的“社会、娱乐、体育”切换效果？？？谢谢
http://www.huian.net/
------解决方案--------------------
给你一个仿雅虎的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML> <HEAD> <TITLE> yahoo 标签 </TITLE>
<META http-equiv=Content-Type content= "text/html; charset=gb2312 ">
<script type= "text/javascript ">
var currentTag = 1;
function fivetag(obj,id){
selectMenu(obj);
for (var i =1,j; j=document.getElementById( "tag_content_ "+i); i++){
j.style.display= "none ";
}
document.getElementById( "tag_content_ "+id).style.display= "block ";
currentTag++;
if (currentTag> 5)
currentTag=1;
}
function selectMenu(obj){
var lia = document.getElementById( "menulist ").getElementsByTagName( "li ");
var lialen = lia.length;
for(i=0; i <lialen; i++){
if(lia[i].getElementsByTagName( "a ")[0].className== "curMenu ")
lia[i].getElementsByTagName( "a ")[0].className = " ";
}
obj.className = "curMenu ";
}
function init(){
var menulist = document.getElementById( "menulist ");
setInterval( 'fivetag(menulist.getElementsByTagName( "li ")[currentTag-1].getElementsByTagName( "a ")[0],currentTag) ',1000);
}
</script>
<STYLE type=text/css> .tag_box {
BORDER-RIGHT: #b0bec7 1px solid; BORDER-TOP: #b0bec7 1px solid; MARGIN: 50px; FONT: 12px Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #b0bec7 1px solid; WIDTH: 400px; BORDER-BOTTOM: #b0bec7 1px solid; HEIGHT: 126px
}
.tag_box UL.menulist {
MARGIN: 0px; OVERFLOW: hidden; WIDTH: 402px; HEIGHT: 20px
}
.tag_box UL.menulist LI {
BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_bg1.gif) repeat-x; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 19px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 19px; TEXT-ALIGN: center
}
.tag_box UL.menulist LI A {
DISPLAY: block; BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_pipe.gif) no-repeat right 1px; WIDTH: 80px; COLOR: #18397c; BORDER-BOTTOM: #93a6b4 1px solid; TEXT-DECORATION: none
}
.tag_box UL.menulist LI A:hover {
TEXT-DECORATION: underline
}
.tag_box UL.menulist LI A.curMenu {
BORDER-RIGHT: #91a7b4 1px solid; BORDER-TOP: #91a7b4 1px solid; FONT-WEIGHT: bold; Z-INDEX: 100; BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_bg2.gif) repeat-x; LEFT: -1px; BORDER-LEFT: #91a7b4 1px solid; WIDTH: 81px; COLOR: #c63; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: -1px; HEIGHT: 21px
}
.tag_box A.nonebg {
BACKGROUND: none transparent scroll repeat 0% 0%
}
.tag_content {
CLEAR: both; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.tag_content IMG.bigConImg {
BORDER-RIGHT: #788a98 1px solid; BORDER-TOP: #788a98 1px solid; DISPLAY: block; FLOAT: left; BORDER-LEFT: #788a98 1px solid; BORDER-BOTTOM: #788a98 1px solid
}
.tag_content H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 3px 6px; WIDTH: 250px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center
}
.tag_content A {
COLOR: #16387c; TEXT-DECORATION: none
}
.tag_content A:hover {
TEXT-DECORATION: underline
}
.tag_content P {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 2px
}
.tag_content UL {
P
如何实现像下面这个网站中部“焦点”栏目里的“社会、娱乐、体育”切换效果？？？谢谢
http://www.huian.net/
------解决方案--------------------
给你一个仿雅虎的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML> <HEAD> <TITLE> yahoo 标签 </TITLE>
<META http-equiv=Content-Type content= "text/html; charset=gb2312 ">
<script type= "text/javascript ">
var currentTag = 1;
function fivetag(obj,id){
selectMenu(obj);
for (var i =1,j; j=document.getElementById( "tag_content_ "+i); i++){
j.style.display= "none ";
}
document.getElementById( "tag_content_ "+id).style.display= "block ";
currentTag++;
if (currentTag> 5)
currentTag=1;
}
function selectMenu(obj){
var lia = document.getElementById( "menulist ").getElementsByTagName( "li ");
var lialen = lia.length;
for(i=0; i <lialen; i++){
if(lia[i].getElementsByTagName( "a ")[0].className== "curMenu ")
lia[i].getElementsByTagName( "a ")[0].className = " ";
}
obj.className = "curMenu ";
}
function init(){
var menulist = document.getElementById( "menulist ");
setInterval( 'fivetag(menulist.getElementsByTagName( "li ")[currentTag-1].getElementsByTagName( "a ")[0],currentTag) ',1000);
}
</script>
<STYLE type=text/css> .tag_box {
BORDER-RIGHT: #b0bec7 1px solid; BORDER-TOP: #b0bec7 1px solid; MARGIN: 50px; FONT: 12px Arial, Helvetica, sans-serif; OVERFLOW: hidden; BORDER-LEFT: #b0bec7 1px solid; WIDTH: 400px; BORDER-BOTTOM: #b0bec7 1px solid; HEIGHT: 126px
}
.tag_box UL.menulist {
MARGIN: 0px; OVERFLOW: hidden; WIDTH: 402px; HEIGHT: 20px
}
.tag_box UL.menulist LI {
BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_bg1.gif) repeat-x; FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 19px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 19px; TEXT-ALIGN: center
}
.tag_box UL.menulist LI A {
DISPLAY: block; BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_pipe.gif) no-repeat right 1px; WIDTH: 80px; COLOR: #18397c; BORDER-BOTTOM: #93a6b4 1px solid; TEXT-DECORATION: none
}
.tag_box UL.menulist LI A:hover {
TEXT-DECORATION: underline
}
.tag_box UL.menulist LI A.curMenu {
BORDER-RIGHT: #91a7b4 1px solid; BORDER-TOP: #91a7b4 1px solid; FONT-WEIGHT: bold; Z-INDEX: 100; BACKGROUND: url(http://www.happyshow.org/sample/20060926/tag_bg2.gif) repeat-x; LEFT: -1px; BORDER-LEFT: #91a7b4 1px solid; WIDTH: 81px; COLOR: #c63; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: -1px; HEIGHT: 21px
}
.tag_box A.nonebg {
BACKGROUND: none transparent scroll repeat 0% 0%
}
.tag_content {
CLEAR: both; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.tag_content IMG.bigConImg {
BORDER-RIGHT: #788a98 1px solid; BORDER-TOP: #788a98 1px solid; DISPLAY: block; FLOAT: left; BORDER-LEFT: #788a98 1px solid; BORDER-BOTTOM: #788a98 1px solid
}
.tag_content H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 3px 6px; WIDTH: 250px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7; TEXT-ALIGN: center
}
.tag_content A {
COLOR: #16387c; TEXT-DECORATION: none
}
.tag_content A:hover {
TEXT-DECORATION: underline
}
.tag_content P {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FLOAT: left; PADDING-BOTTOM: 2px; MARGIN: 0px; LINE-HEIGHT: 18px; PADDING-TOP: 2px
}
.tag_content UL {
P
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
