jQuery空格键操作随机抽奖代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery空格键操作随机抽奖代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery空格键操作随机抽奖代码</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">

        $(function () {
            var alldata = new Array("image/1.jpeg", "image/2.jpg", "image/3.jpg", "image/4.jpg", "image/5.jpg", "image/6.jpg", "image/7.jpg");
            var imageName = new Array("#img1", "#img2", "#img3", "#img4", "#img5", "#img6");
            var nameNum = imageName.length - 1;
            var num = alldata.length - 1;
            var show = $("#image");
            var btn = $("#btn");
            var open = false;

            function change() {
                var randomVal = Math.round(Math.random() * num);
                var prizeName = alldata[randomVal];
                //show.text(prizeName);
                show.attr("src", prizeName);
            }

            Array.prototype.indexOf = function (val) {
                for (var i = 0; i < this.length; i++) {
                    if (this[i] == val) return i;
                }
                return -1;
            };

            Array.prototype.remove = function (val) {
                var index = this.indexOf(val);
                if (index > -1) {
                    this.splice(index, 1);
                }
            };

            function run() {
                if (!open) {
                    timer = setInterval(change, 20);
                    //btn.removeClass('start').addClass('stop').text('停止');
                    open = true;
                } else {
                    var height = $(imageName[nameNum]).css("height");
                    var width = $(imageName[nameNum]).css("width");

                    var name = $("#image").attr("src");
                    var imgClone = $("#image").clone(true).css("opacity", '0.7');
                    alldata.remove(name);
                    imgClone.css({ "position": "absolute", "top": "50px", "left": "50px" });
                    $("#imgDiv").parent().append(imgClone);
                    imgClone.animate({ height: "150px", width: "150px" }, 400);
                    imgClone.animate({ left: $(imageName[nameNum]).offset().left, top: $(imageName[nameNum]).offset().top }, 600);
                    imgClone.animate({ height: height, width: width }, 350, function () {
                        $(imageName[nameNum]).attr("src", name);
                        nameNum = nameNum - 1;
                    });
                    clearInterval(timer);
                    //btn.removeClass('stop').addClass('start').text('开始抽奖');
                    open = false;
                }
            }
            //btn.click(function(){run();})
            $(document).keydown(function (e) {
                if (!e) var e = window.event;
                if (e.keyCode == 32) {
                    run();
                }
            });

        })

    </script>
    <style>
        body {
            background-image: url(image/bg1.jpg);
        }

        .wrap {
            width: 600px;
            margin: 100px auto;
            font-family: "微软雅黑";
        }

        .show {
            width: 650px;
            height: 600px;
            background-color: #ff3300;
            line-height: 100px;
            text-align: center;
            color: #fff;
            font-size: 28px;
            -moz-border-radius: 100px;
            -webkit-border-radius: 100px;
            border-radius: 100px;
            background-image: -webkit-gradient(linear,0% 0%, 0% 100%, from(#FF9600), to(#F84000), color-stop(0.5,#fb6c00));
            -moz-box-shadow: 2px 2px 10px #BBBBBB;
            -webkit-box-shadow: 2px 2px 10px #BBBBBB;
            box-shadow: 2px 2px 10px #BBBBBB;
        }

        .btn a {
            display: block;
            width: 120px;
            height: 50px;
            margin: 30px auto;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            color: #fff;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
        }

        .btn a.start {
            background: #80b600;
        }

        .btn a.start:hover {
            background: #75a700;
        }

        .btn a.stop {
            background: #00a2ff;
        }

        .btn a.stop:hover {
            background: #008bdb;
        }

        img {
            border: 0;
        }
    </style>

</head>

<body>
<div class="wrap">	
	<div class="show" id="show">
		点击空格键开始抽奖	
		<div id="imgDiv">
				<img src="image/1.jpeg" id="image" height="450px" width="400px"/>
		</div>
	</div>
   <ul style="position:absolute; top:100px; right:180px ;list-style-type:none" >
	<h4 style="color:#06C">一等奖:</h4>
	<li><img src="" id="img1" height="100px" width="100px" /></li>
	<h4 style="color:#06C">二等奖:</h4>
	<li><img src="" id="img2" height="100px" width="100px" /></li>
	<li><img src="" id="img3" height="100px" width="100px" /></li>
	</ul>
	 <ul style="position:absolute; top:100px; right:350px ;list-style-type:none" >
	<h4 style="color:#06C">三等奖：</h4>
	<li><img src="" id="img4" height="100px" width="100px" /></li>
	<li><img src="" id="img5" height="100px" width="100px" /></li>
	<li><img src="" id="img6" height="100px" width="100px" /></li>
	</ul>   	
	<!--<div class="btn">
		<a href="javascript:void(0)" class="start" id="btn">开始抽奖</a>
	</div>-->
</div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)