js 摇奖机

最新推荐文章于 2023-02-28 17:56:20 发布

原创最新推荐文章于 2023-02-28 17:56:20 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #CSS #HTML #ViewUI

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

最近运营的网站需要一个 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";
}

效果图：

完整包见附件