当前位置：网站综合首页 >> 网页JS特效 >> 图形图象类 >> KUGOO首页展示效果

KUGOO首页展示效果

来源：中国设计秀作者：佚名点击：488 加入收藏发表评论

顶一下

关键字：网页特效

代码如下,点击运行可查看效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>div</title>
<style>
BODY {
 FONT-SIZE: 12px; BACKGROUND: #ffffff; MARGIN: 0px; COLOR: #666666; LINE-HEIGHT: 22px; FONT-FAMILY: verdana, arial, helvetica, sans-serif; LETTER-SPACING: 1px
}
IMG {
 BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
A:visited {
 COLOR: #666666; TEXT-DECORATION: none
}
A:link {
 COLOR: #666666; TEXT-DECORATION: none
}
A:hover {
 COLOR: #ff9900; TEXT-DECORATION: underline
}
#Pan1_left {
 FLOAT: left; WIDTH: 712px; HEIGHT: 368px
}
.Pan1_left_title_b {
 BORDER-RIGHT: #b7d5e4 1px solid; BORDER-TOP: #b7d5e4 1px solid; BACKGROUND: #eef9fe; BORDER-LEFT: #b7d5e4 1px solid; WIDTH: 100%; BORDER-BOTTOM: #b7d5e4 1px solid; POSITION: relative; HEIGHT: 24px
}
.Pan1_left_title {
 BORDER-RIGHT: #b7d5e4 1px solid; BORDER-TOP: #b7d5e4 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: #ffffff; LEFT: 8px; BORDER-LEFT: #b7d5e4 1px solid; WIDTH: 130px; COLOR: #3772ae; LINE-HEIGHT: 28px; BORDER-BOTTOM: #b7d5e4 1px solid; POSITION: absolute; TOP: -3px; HEIGHT: 28px; TEXT-ALIGN: center
}
.Pan1_left_title_r {
 FLOAT: right; MARGIN: 5px 5px 0px
}
.Pan1_left_title_r IMG {
 CURSOR: pointer
}
.Pan1_left_list {
 FILTER: revealTrans(duration=2,transition=3); FLOAT: left; MARGIN: 5px; HEIGHT: 251px
}
.Pan1_left_list_i {
 FLOAT: left; MARGIN: 17px 0px; WIDTH: 175px
}
.Pan1_left_list_l {
 BORDER-RIGHT: #b7d5e4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #b7d5e4 1px solid; PADDING-LEFT: 1px; FLOAT: left; PADDING-BOTTOM: 1px; BORDER-LEFT: #b7d5e4 1px solid; WIDTH: 88px; PADDING-TOP: 1px; BORDER-BOTTOM: #b7d5e4 1px solid
}
.Pan1_left_list_r {
 FLOAT: left; MARGIN-LEFT: 5px; LETTER-SPACING: 0px
}
.Pan1_left_ad {
 FLOAT: left; WIDTH: 100%
}
.Pan1_left_ad_l {
 FLOAT: left; WIDTH: 470px; HEIGHT: 80px
}
.Pan1_left_ad_r {
 FLOAT: right; WIDTH: 235px; HEIGHT: 80px
}
.navyblue {
 COLOR: #3772ae
}
A.blue:visited {
 COLOR: #3772ae; TEXT-DECORATION: none
}
A.blue:link {
 COLOR: #3772ae; TEXT-DECORATION: none
}
A.blue:hover {
 COLOR: #ff9900; TEXT-DECORATION: underline
}
A.green:visited {
 COLOR: #009900; TEXT-DECORATION: underline
}
A.green:link {
 COLOR: #009900; TEXT-DECORATION: underline
}
A.green:hover {
 COLOR: #ff9900; TEXT-DECORATION: underline
}
.clear {
 CLEAR: both
}
</style>
</head>
<body>
<DIV id=Pan1_left>
 <DIV class=Pan1_left_title_b>
  <DIV class=Pan1_left_title>KUGOO</DIV>
  <DIV class=Pan1_left_title_r>
  <img src="/uploadfile/site/uploadfile/200806/20080621110949721.gif" onclick=prevLayer2(); title="上一页" width=14 height=14 > 
  <img src="/uploadfile/site/uploadfile/200806/20080621110949437.GIF" onclick=nextLayer2(); title="上一页" width=14 height=14 >
    </DIV>
 </DIV>
 <DIV class=Pan1_left_list id=focusList1 style="DISPLAY: block">
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-23</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title="" href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110949849.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
 </DIV>
 
 <DIV class=Pan1_left_list id=focusList2 style="DISPLAY: none">
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title="" href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
 
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
  
  <DIV class=Pan1_left_list_i>
   <DIV class=Pan1_left_list_l>
    <A href="#" target=_blank><IMG height=88 alt="" src="/uploadfile/site/uploadfile/200806/20080621110950932.jpg" width=88></A></DIV>
   <DIV class=Pan1_left_list_r>
    <A class="navyblue blue" title='' href="#" target=_blank>KUGOO</A><BR>
    <SPAN class="font11 hoary">2007-11-27</SPAN><BR><A class=green href="#" target=_blank>KUGOO</A></DIV>
  </DIV>
 </DIV>
 <DIV class=clear></DIV>
</DIV>
<SCRIPT type=text/javascript>
//块轮换
var num2=1;
var timer2;
var count2;
var isfirst2=true;
function prevLayer2() {
  clearTimeout(timer2);
  num2=num2--;
  changeImg2();
}
function nextLayer2() {
  clearTimeout(timer2);
  num2=num2++;
  changeImg2();
}
function changeImg2() {
  if(num2>count2||num2<1) num2=1;
  if(!isfirst2) selectLayer2(num2);
  if(isfirst2) isfirst2=false;
  num2++;
  timer2=setTimeout('changeImg2()',10000);
}
function selectLayer2(i) {
  for(var j=1;j<=count2;j++) {
    if (j==i) {
      try {
        document.getElementById("focusList"+j).filters.revealTrans.transition=21;
        document.getElementById("focusList"+j).filters.revealTrans.apply();
        document.getElementById("focusList"+j).filters.revealTrans.play();
      }
      catch(e) {}
      document.getElementById("focusList"+j).style.display="block";
    } else {
      document.getElementById("focusList"+j).style.display="none";
    }
  }
}
function changeblockStart(total) {
  count2=total;
  changeImg2();
}
changeblockStart(2)</SCRIPT>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2008-06-21 23:01:09 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/site/html/article_2352.html

热点文章/相关文章