jQuery手机九宫格幸运抽奖代码.zip资源-CSDN文库

共15个文件

png：10个

js：2个

css：2个

版权申诉

jquery

jquery代码

jquery特效

jquery插件

jquery实例

187 浏览量 2023-09-21 00:26:42 上传评论收藏 92KB ZIP 举报

**jQuery手机九宫格幸运抽奖代码详解** 在移动互联网时代，互动式的抽奖活动越来越受到用户的喜爱，其中九宫格抽奖模式因为其简洁直观且趣味性强而广泛应用。本篇将详细介绍如何利用jQuery实现一个手机端的九宫格抽奖效果，以及涉及的相关技术与知识点。我们看到这个压缩包包含以下四个主要文件： 1. `index.html` - 这是网页的主体部分，用于定义页面结构和内容。 2. `img` - 图片资源文件夹，通常包含抽奖元素的背景图或中奖图标等。 3. `js` - JavaScript代码文件夹，里面包含实现抽奖功能的核心代码，很可能有一个名为`main.js`或者`jquery抽奖.js`的文件。 4. `css` - 样式表文件夹，用于定义页面的样式和布局，一般会有一个`style.css`文件。 **HTML 结构** `index.html`文件中，我们需要一个包含九个单元格的容器，可以使用`<div>`元素来构建，每个单元格用`<div class="grid-item">`表示。同时，可能还会有一个按钮`<button id="start">开始抽奖</button>`用于触发抽奖事件。 ```html <div id="grid"> <div class="grid-item"></div> <div class="grid-item"></div>  </div> <button id="start">开始抽奖</button> ``` **CSS 样式** `style.css`中，我们需要设置九宫格的布局和样式，比如每个单元格的宽高、边距、背景色等。同时，还需要设定动画效果，如旋转、淡入淡出等，以便在抽奖过程中呈现出动态效果。 ```css #grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .grid-item { width: 100px; height: 100px; background-color: #f0f0f0; transition: transform 0.5s, opacity 0.5s; } ``` **jQuery 代码** `js`文件中的`main.js`负责实现抽奖逻辑。主要步骤包括： 1. 绑定开始按钮的点击事件。 2. 随机选择一个中奖项（九宫格的一个单元格）。 3. 应用动画效果，依次使所有单元格快速旋转，然后恢复原状，最后只留下中奖项保持旋转状态。 4. 在一段时间后停止旋转，显示中奖结果。 ```javascript $(document).ready(function() { var items = $('.grid-item'); $('#start').on('click', function() { var winnerIndex = Math.floor(Math.random() * items.length); items.each(function(index) { $(this).addClass('rotate'); setTimeout(function() { $(items[index]).removeClass('rotate'); }, index * 100); }); setTimeout(function() { items.eq(winnerIndex).addClass('winner'); }, items.length * 100); }); }); ``` 在上面的代码中，`addClass('rotate')`和`removeClass('rotate')`分别用于添加和移除旋转动画，`setTimeout`用于控制动画的时间顺序。`addClass('winner')`用于标记中奖项，并可能为其添加特定的样式，如改变背景色等。 **jQuery 特效与插件** 虽然这个例子没有使用jQuery插件，但jQuery库本身提供了丰富的动画和DOM操作功能，使得实现这种复杂的交互效果变得简单。例如，`addClass`、`removeClass`、`on`事件绑定、`setTimeout`等都是jQuery提供的便捷API。总结，通过理解并实践这个jQuery手机九宫格抽奖代码，我们可以学到HTML结构设计、CSS动画效果制作以及jQuery事件处理和动画控制等关键技能。这对于我们进行更复杂的Web交互设计具有很大的参考价值。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery手机九宫格幸运抽奖代码.zip （15个子文件）

common.js 1KB

jquery.min.js 91KB

img

bg-img.png 23KB

05.png 5KB

02.png 4KB

proBj.png 1KB

04.png 4KB

01.png 6KB

03.png 4KB

active.png 2KB

icon-laba.png 1KB

cjBtn.png 7KB

css

styleCJ.css 2KB

common.css 2KB

index.html 5KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>jQuery手机九宫格幸运抽奖代码</title> <style type="text/css"> .qimo8{ overflow:hidden;} .qimo8 .qimo {/*width:99999999px;*/width:8000%;} .qimo8 .qimo div{ float:left;} .qimo8 .qimo ul{float:left;overflow:hidden; zoom:1; } .qimo8 .qimo ul li{float:left; list-style:none; font-size: 24px;margin: 0 1rem;} </style> <link rel="stylesheet" type="text/css" href="css/styleCJ.css"/> <script src="js/common.js"></script> </head> <body><script src="/demos/googlegg.js"></script>  <div class="shanDeng" id="deng"> <div id="luck"> <table style="border-spacing:.08rem .03rem;"> <tr> <td class="luck-unit luck-unit-0"><img src="./img/01.png"></td> <td class="luck-unit luck-unit-1"><img src="./img/02.png"></td> <td class="luck-unit luck-unit-2"><img src="./img/03.png"></td> </tr> <tr> <td class="luck-unit luck-unit-7"><img src="./img/05.png"></td> <td class="cjBtn" id="btn"></td> <td class="luck-unit luck-unit-3"><img src="./img/01.png"></td> </tr> <tr> <td class="luck-unit luck-unit-6"><img src="./img/02.png"></td> <td class="luck-unit luck-unit-5"><img src="./img/04.png"></td> <td class="luck-unit luck-unit-4"><img src="./img/03.png"></td> </tr> </table> </div> </div> <div class="rule"> <p>抽奖活动规则</p> <p>1、单次加油满200元,可抽奖一次;</p> <p>2、各种奖券使用规则详见该奖券的使用说明;</p> <p>3、奖券请在有效期内使用或者分享给其他朋友,过期无效</p> </div> <div class="play"> <span></span><div class="div"> <div id="demo" class="qimo8"> <div class="qimo"> <div id="demo1"> <ul> <li>懒人获得一等奖</li> <li>懒人获得四等奖</li> <li>懒人获得三等奖</li> <li>懒人获得二等奖</li> <li>懒人获得四等奖</li> <li>懒人获得三等奖</li> <li>懒人获得二等奖</li> <li>懒人获得三等奖</li> </ul> </div> <div id="demo2"></div> </div> </div> </div> <script src="js/jquery.min.js"></script> <script> var luck={ index:0, //当前转动到哪个位置，起点位置 count:0, //总共有多少个位置 timer:0, //setTimeout的ID，用clearTimeout清除 speed:20, //初始转动速度 times:0, //转动次数 cycle:50, //转动基本次数：即至少需要转动多少次再进入抽奖环节 prize:-1, //中奖位置 init:function(id){ if ($("#"+id).find(".luck-unit").length>0) { $luck = $("#"+id); $units = $luck.find(".luck-unit"); this.obj = $luck; this.count = $units.length; $luck.find(".luck-unit-"+this.index).addClass("active"); }; }, roll:function(){ var index = this.index; var count = this.count; var luck = this.obj; $(luck).find(".luck-unit-"+index).removeClass("active"); index += 1; if (index>count-1) { index = 0; }; $(luck).find(".luck-unit-"+index).addClass("active"); this.index=index; return false; }, stop:function(index){ this.prize=index; return false; } }; function roll(){ luck.times += 1; luck.roll(); if (luck.times > luck.cycle+10 && luck.prize==luck.index) { clearTimeout(luck.timer); luck.prize=-1; luck.times=0; click=false; }else{ if (luck.times<luck.cycle) { luck.speed -= 10; }else if(luck.times==luck.cycle) { var index = Math.random()*(luck.count)|0; if(index>5){ index = 7; }else { index = 5; } luck.prize = index;//最终中奖位置 }else{ if (luck.times > luck.cycle+10 && ((luck.prize==0 && luck.index==7) || luck.prize==luck.index+1)) { luck.speed += 110; }else{ luck.speed += 20; } } if (luck.speed<40) { luck.speed=40; }; luck.timer = setTimeout(roll,luck.speed); } return false; } var click=false; window.onload=function(){ luck.init('luck'); $("#btn").click(function(){ /*//按下弹起效果 $("#btn").addClass("cjBtnDom"); setTimeout(function(){ $("#btn").removeClass("cjBtnDom"); },200);*/ if(click) { return false; } else{ luck.speed=100; roll(); click=true; return false; } }); }; //播报 var demo = document.getElementById("demo"); var demo1 = document.getElementById("demo1"); var demo2 = document.getElementById("demo2"); demo2.innerHTML=document.getElementById("demo1").innerHTML; function Marquee(){ if(demo.scrollLeft-demo2.offsetWidth>=0){ demo.scrollLeft-=demo1.offsetWidth; } else{ demo.scrollLeft++; } } setInterval(Marquee,10); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>更多源码下载：<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉