js 摇奖机

pengranxiang · 发表于 2013-2-7 22:53:45

最近运营的网站需要一个 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.innerHTMLvar 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.innerHTMLvar 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.innerHTMLfunction 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";} 效果图：

完整包见附件

		自动登录	找回密码
密码			立即注册