最近运营的网站 需要一个 js 实现的摇奖的效果。在网上找了些 图片移动效果实例后,修改成需要的效果了。 记录下。
<!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" />
<title>无缝滚动</title>
<style type="text/css">
/***************新增样式******************/
.yaojiang_beijing{width:263px; height:124px; background-image: url(2.gif); margin:0 auto;background-repeat: repeat-x;display:block;}
.yaojiang_bianliang{width:160px; height:70px; float:left; padding:28px 0 0 33px;margin:0;display:block;}
.yaojiang_bianliang dt{width:47px; height:65px; float:left; padding:0 0 0 2px;margin:0;display:block; border:1px solid #000;}
.yaojiang_anniu{width:38px; height:38px; float:left; padding:40px 0 0 20px;margin:0;display:block; }
</style>
</head>
<body>
<div class="dxq_jingpaiming_1">
<div class="yaojiang_beijing">
<div class="yaojiang_bianliang">
<dt>
<div id="demo" style="overflow:hidden;height:65px;width:47px">
<div id="demo1">
<img id="orange" src="39.gif"/><p/>
<img src="4.gif"/><p/>
<img src="5.gif"/><p/>
<img src="6.gif"/><p/>
<img src="7.gif"/><p/>
<img src="19.gif"/><p/>
<img src="20.gif"/><p/>
<img src="21.gif"/><p/>
<img src="22.gif"/><p/>
<img src="23.gif"/><p/>
<img src="24.gif"/><p/>
</div>
<div id="demo2">
</div>
</div>
</dt>
<dt>
<div id="demo_2" style="overflow:hidden;height:65px;width:47px">
<div id="demo1_2">
<img id="blue" src="38.gif"/><p/>
<img src="8.gif"/><p/>
<img src="9.gif"/><p/>
<img src="10.gif"/><p/>
<img src="11.gif"/><p/>
<img src="25.gif"/><p/>
<img src="26.gif"/><p/>
<img src="27.gif"/><p/>
<img src="28.gif"/><p/>
<img src="29.gif"/><p/>
<img src="30.gif"/><p/>
</div>
<div id="demo2_2">
</div>
</div>
</dt>
<dt>
<div id="demo_3" style="overflow:hidden;height:65px;width:47px">
<div id="demo1_3">
<img id="green" src="37.gif"/><p/>
<img src="12.gif"/><p/>
<img src="13.gif"/><p/>
<img src="14.gif"/><p/>
<img src="15.gif"/><p/>
<img src="31.gif"/><p/>
<img src="32.gif"/><p/>
<img src="33.gif"/><p/>
<img src="34.gif"/><p/>
<img src="35.gif"/><p/>
<img src="36.gif"/><p/>
</div>
<div id="demo2_3">
</div>
</div>
</dt>
</div>
<div class="yaojiang_anniu">
<img id="shanshuo" src="16.gif" border="0"/>
</div>
</div>
<div class="dxq_paiming_hang" style="text-align:center;"><a id="startButton" href="javascript:start();"><img src="1.gif" border="0"/></a></div>
<script type="text/javascript" src="yaojiang.js"></script>
</body>
</html>
var speed=1; var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); var demo=document.getElementById("demo"); demo2.innerHTML=demo1.innerHTML var demo2_2=document.getElementById("demo2_2"); var demo1_2=document.getElementById("demo1_2"); var demo_2=document.getElementById("demo_2"); demo2_2.innerHTML=demo1_2.innerHTML var demo2_3=document.getElementById("demo2_3"); var demo1_3=document.getElementById("demo1_3"); var demo_3=document.getElementById("demo_3"); demo2_3.innerHTML=demo1_3.innerHTML function Marquee(_demo, _demo1, _demo2, move){ if(_demo2.offsetTop-_demo.scrollTop>=65) _demo.scrollTop+=_demo1.offsetHeight; else{ _demo.scrollTop -= move; } } var MyMar1, MyMar2, MyMar3, MyMar4, shang=0; function flashLogo() { var deng = document.getElementById("shanshuo"); if(shang == 0) { deng.src = "17.gif"; shang = 1; } else { deng.src = "16.gif"; shang = 0; } } function Marquee1(){ Marquee(demo, demo1, demo2, 5); } function Marquee2(){ Marquee(demo_2, demo1_2, demo2_2, 5); } function Marquee3(){ Marquee(demo_3, demo1_3, demo2_3, 5); } function start() { document.getElementById("startButton").href="javascript:void(null);" MyMar1=setInterval(Marquee1,speed); MyMar2=setInterval(Marquee2,speed); MyMar3=setInterval(Marquee3,speed); MyMar4=setInterval(flashLogo, 100); setTimeout("stop()", 3000); } var images1 = "4,5,6,7,19,20,21,22,23,24"; var images2 = "8,9,10,11,25,26,27,28,29,30"; var images3 = "12,13,14,15,31,32,33,34,35,36"; var imageArr1 = images1.split(","); var imageArr2 = images2.split(","); var imageArr3 = images3.split(","); function GetRnd(min,max){ return parseInt(Math.random()*(max-min+1)); } function stop() { document.getElementById("startButton").href="javascript:start();"; var orange = imageArr1[GetRnd(0, imageArr1.length-1)]; var blue = imageArr2[GetRnd(0, imageArr2.length-1)]; var green = imageArr3[GetRnd(0, imageArr3.length-1)]; stopSet(orange, blue, green); } function stopSet(orange, blue, green) { clearInterval(MyMar1); clearInterval(MyMar2); clearInterval(MyMar3); clearInterval(MyMar4); demo.scrollTop = 0; demo_2.scrollTop = 0; demo_3.scrollTop = 0; document.getElementById("orange").src = orange + ".gif"; document.getElementById("blue").src = blue + ".gif"; document.getElementById("green").src = green + ".gif"; document.getElementById("shanshuo").src = "17.gif"; }
效果图:
完整包见附件