js 摇奖机

pengranxiang

浏览: 462743 次
性别:
来自: 长沙

最近访客更多访客>>

dbwfncxz

s达s

odexuce

bookboy008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript XHTML CSS HTML

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

效果图：

完整包见附件

摇奖机.zip (101 KB)
下载次数: 314

查看图片附件

分享到：

MyEclipse 启动Tomcat启动信息显示在控制台 | 【转载】了解开源的许可证GPL、LGPL、BSD ...

2011-01-06 13:27
浏览 5434
评论(6)
分类:Web前端
查看更多

6 楼微风&微笑 2013-07-08

原来<script type="text/javascript" src="yaojiang.js"></script> 这一行不能放在头部或者弄上面去啊，要不然图片就不滚动了

5 楼微风&微笑 2013-07-05

加到jsp中图片就不滚动是怎么回事?

4 楼冰泪渔人 2012-11-25

3 楼 jancy1022 2012-04-17

初学者没看明白，怎么表示中奖效果？

2 楼 xteo24 2011-08-15

这个有个问题，IE下转的特别慢。。

1 楼如果风…… 2011-05-20

里面有些内容对于我这样的初学者看的不太懂的，能不能在里面写些注释呢？

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 摇奖机

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js 摇奖机

评论

发表评论

相关推荐

【转载】Jquery : 上下滚动--单行 批量多行 文字图片翻屏

使用jQuery Autocomplete（自动完成）插件

JS 定时器 （setInterval 和 setTimeout 函数）

js修改二級地址下拉框

IE6中png圖片的透明背景 官方解決方案

chm中的链接变下载的解决方案

JQuery获取和设置Select选项方法

动态添加表格行

浏览器JavaScript开启判断

jquery form 插件的使用

悟透JavaScript -----下

悟透JavaScript-----中

悟透JavaScript -----上

最近访客更多访客>>

【转载】Jquery : 上下滚动--单行批量多行文字图片翻屏

JS 定时器（setInterval 和 setTimeout 函数）

IE6中png圖片的透明背景官方解決方案