鸿 网 互 联 www.68idc.cn

当前位置 : 主页 > 网站制作教程 > 设计基础 > >

可选择背景色的广告牌效果

来源:互联网 作者:佚名 时间:2013-04-25 12:08

脚本源代码:
<body>
<style>
body {background-color:#999999}
#all {width:100px; height:200px; background-color:#FFFFFF; overflow:hidden; }
#left {width:100px; background-color:#F90FF1; float:left; height:200px}
#left li {cursor:hand; font:bold 12px "Arial Black";  list-style:circle; margin-left:-10px; color:#FFFFFF}
#right {width:100px; background-color:#FFFF00; float:left; height:200px; cursor:hand;font:bold 15px "Arial Black"; color: #333333}
</style>
<script language="javascript">
function $(id) {return document.getElementById(id)}
function left(id) {
var alla= $("alla");
var right= $("right");
var alla_left=parseInt(alla.style.marginLeft);
   if (alla_left==0) {
      if (id==1) {right.innerHTML="#5AE9FA";;right.style.backgroundColor="#5AE9FA"}
      else if (id==2) {right.innerHTML="#ADFA5A";right.style.backgroundColor="#ADFA5A"}
      else if (id==3) {right.innerHTML="#F9A40F";;right.style.backgroundColor="#F9A40F"}
      left_decrease()
   }
   if (alla_left==-100) {right_decrease()}
}
function left_decrease() {
var alla= $("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==-100) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left-1;
time= setTimeout("left_decrease()",1)
}
}
function right_decrease() {
var alla= document.getElementById("alla");
var alla_left=parseInt(alla.style.marginLeft);
if (alla_left==0) {clearTimeout(time)}
else {
alla.style.marginLeft=alla_left+1;
time= setTimeout("right_decrease()",1)}
}
</script>
<div id="all">
  <div id="alla" style="margin-left:0px;  width:200px">
     <div id="left">
     <ul>
     <li onclick="left(1)" style="color:#5AE9FA">color1</li>
     <li onclick="left(2)" style="color:#ADFA5A">color2</li>
     <li onclick="left(3)" style="color:#F9A40F">color3</li>
  </ul>
  </div>
     <div id="right"  onclick="left()"></div>
  </div>
</div>
</body>

网友评论