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

时间:2010-04-09 12:24:46  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读: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) {retur...
  正文:<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> "可选择背景色的广告牌效果代码"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13551.html


关键字:

关于《可选择背景色的广告牌效果代码》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td