<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css" media="all">body { margin:0px; padding:0px; font-size:12px; font-family:"宋体", Arial, Helvetica, sans-serif; background-color:#000000;}img { border:0px;}a { cursor:pointer;}.content{ width:590px; height:auto; overflow:hidden; margin:0px auto; margin-top:60px; padding:10px 0px 0px 0px;}.left{ width:417px; height:auto; overflow:hidden; float:left; padding:36px 0px 0px 20px; position:relative;}.pic{ width:414px; height:auto; overflow:hidden; border:#C6B6A0 2px solid;}.right{ height:auto; overflow:hidden; float:left; padding:0px 0px 0px 0px; text-align:center; color:#C6C5C1; font-weight:bold; font-size:16px;}.right ul { margin:0px; padding:0px 11px 0px 21px; list-style:none; height:auto; overflow:hidden;}.right li { padding:0px 0px 2px 0px; height:80px; overflow:hidden;}.right li img { border:#ACA79E 1px solid; cursor:pointer; width:103px; height:77px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity:0.5;}.right li:hover img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1;}.lighton {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important; -moz-opacity:1 !important;}.lightoff {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity:0.3;}.top { padding-left:21px; width:126px; height:21px; overflow:hidden; cursor:pointer;}.slide_content { width:auto; height:246px; overflow:hidden;}.bottom { padding-left:21px; width:126px; height:19px; overflow:hidden; cursor:pointer;}.txt{width:414px;padding:2px 0px 0px 0px;height:20px;overflow:hidden;color:#FFFBD0;text-align:center;position:absolute;right:2px;bottom:1px;line-height:19px;background-color:#333333;opacity:0.50;filter:alpha(opacity=50);}.txt span{display:block;width:100%;}</style><script language="javascript" type="text/javascript">//slidevar scontainer,scHeight,listH,sint,sinum=0,sdir=1,cnum,cstop,step,isinit,txts,txtint;window.οnlοad=function(){ scontainer=getid("inner_slide"); scHeight=scontainer.offsetHeight; listH=scontainer.getElementsByTagName("ul")[0].offsetHeight; for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].index=i+1;scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].οnclick=function(){showp(this.index)}} }function inner_slide(n){ if(n==1){sdir=(-1)}else{sdir=1} if(scontainer.scrollTop<=0 && n==1){return false;}else if(scontainer.scrollTop>=(listH-scHeight) && n==2){return false;} sinum=0; step=6; cstop=scontainer.scrollTop; sint=setInterval(inner_mov,2); return true; }function inner_mov(){ scontainer.scrollTop+=(step*sdir); if(step>2){ step-=1} sinum+=step; if(sinum>=82){clearInterval(sint);scontainer.scrollTop=cstop+82*sdir;showp(scontainer.scrollTop/82+1)} if(scontainer.scrollTop<=0){getid("sbutton1").style.visibility="hidden";}else{getid("sbutton1").style.visibility="visible";} if(scontainer.scrollTop>=(listH-scHeight)){getid("sbutton2").style.display="none";}else{getid("sbutton2").style.display="block";} }function txtm(){if(txts>0){txts--;}else{clearInterval(txtint)}getid("txt").style.marginTop=txts+"px";}function showp(n){ getid("photo").src=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("src"); getid("txt").innerHTML=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("alt"); txts=20; clearInterval(txtint); txtint=setInterval("txtm()",10); for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].className="lightoff";} scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].className="lighton"; }function getid(id){return document.getElementById(id);}</script><title>客服中心</title></head><body><div class="content"> <div class="left"><div class="pic"><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" id="photo"/></div><div class="txt"><span id="txt">墙上是大家的大头贴拼图</span></div></div> <div class="right"> <div class="top" οnclick="inner_slide(1)" id="sbutton1">Δ</div> <div class="slide_content" id="inner_slide"> <ul> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="墙上是大家的大头贴拼图" class="lighton"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="服务器中聊得火热的留言板背后"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="忙碌的一天开始了"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="墙上是大家的大头贴拼图"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="服务器中聊得火热的留言板背后"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="忙碌的一天开始了"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="墙上是大家的大头贴拼图"/></li> <li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="服务器中聊得火热的留言板背后"/></li> </ul> </div> <div class="bottom" οnclick="inner_slide(2)" id="sbutton2">∇</div> </div></div></body></html><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
相关资源：经典的网页特效代码 特效代码 html特效代码