最近运营的网站 需要一个 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";
}
效果图:
完整包见附件
- 大小: 11.3 KB
分享到:
相关推荐
帮侃哥写的小玩意儿。
一个可爱的雪人 红红的鼻子 白白的皮肤 都是自己用MFC编出来的 求下载
一个摇奖的js模板,界面用bootstrap设计的
1、配置文件:<script type="text/javascript" src="js/jquery-1.7.2-min.js"> <script type="text/javascript" src="js/easing.js"></script>
用html+css+javascript实现的模拟机选双色球,通过定时器模拟选出一组或多组号码,可以将选择的号码进行排序,添加到列表中,导出excel,分页等操作,除此外还实现了图片的上传预览等功能......
和微信扣扣的红包一样,不过重点放在了拆红包,摇红包上
三个文本框自定义数字抽奖机 html javascript 三个文本框自定义数字抽奖机
我们平时在看一些选秀节目或一些歌唱类比赛节目时经常会看到在现场的大屏幕上会有观众的手机号在滚动来选出谁是幸运观众或谁中了什么奖项,这些手机号都是现场观众或场外观众在给选手投票时产生的,当主持人一声开始...
实现效果: jquery随机抽奖,随机抽奖还是比较不错的,一般在企业网站中用,例如年会,大家用手机看网站中的抽奖活动,可以直接抽奖,奖品换随机的,php中文网推荐下载!
1.程序完全是js实现 2.内容可以是手机号或者姓名等文字 3.奖项可以分批抽取4.专门设置了无效按钮 5.适合用作院庆、年会抽奖活动