jQuery特效：实现抽奖

知识点

jQuery方法的连用

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;list-style: none;}.box {width: 300px;height: 300px;border: 1px solid orange;margin: 100px auto;}.goods li {width: 100px;height: 100px;/*background-color: red;*/float: left;box-sizing: border-box;}.goods li img {width: 100px;height: 100px;}.current {border: 1px solid orange;}#begin img{border-radius: 50%;}</style>
</head>
<body>
<div class="box"><ul class="goods"><li><img src="" alt=""></li><li class="current"><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li id="begin"><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li><li><img src="" alt=""></li></ul>
</div><script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 0. 数据源var goodsNames = ['耳机', '平板电脑', '感谢参与', '平板鞋', 'begin', '特步', '玩偶', 'ipone手机', '安卓手机'];var goodsImgs = [];for (var i = 1; i < 10; i++) {goodsImgs.push('images/' + i + '.png');}// 1. 展示数据源$('.goods>li>img').each(function (index, value) {$(this).attr('src', goodsImgs[index]);});// 2. 监听按钮的点击var currentGunIndex = 0;var showIndex = 0;$('#begin').click(function () {// 2.0 清除定时器clearInterval(timer);// 2.1 控制滚动的次数 1 <= x <= 2var count = Math.floor(Math.random() * 8) + 8;console.log(count);// 滚动// 2.2 制定滚动的路径var showIndexs = [0, 1, 2, 5, 8, 7, 6, 3];// 2.3  根据路径往回滚var timer = setInterval(function () {// 2.4 判断if(count <= 0){if(showIndex === 2){ // 没有中奖alert('运气不好哦~');}else {alert('恭喜中奖, 奖品是:' + goodsNames[showIndex]);}// 2.5 清除定时器clearInterval(timer);return;}// 2.5 条件count --;// 滚动的循环 1,2,3,4,5,6,7,0,1,2,3....currentGunIndex = (currentGunIndex + 1) % showIndexs.length;console.log(currentGunIndex);// 从滚动路径中找到当前盒子的下标showIndex = showIndexs[currentGunIndex];// console.log(showIndex);// 2.6 让当前的盒子被选中$('.goods>li').eq(showIndex).addClass('current').siblings().removeClass('current');// 2.7 控制启动按钮的旋转$('#begin').css({'transform': 'rotate(' + (currentGunIndex - 1) * 45 +'deg)'});}, 200);});});
</script>
</body>
</html>

运行效果

jQuery特效：实现抽奖相关推荐

10个经典而简单的jQuery特效设计在线演示
jQuery对我们web开发者来说绝对是最经典.最有价值的一个框架之一了,因为他真正让我们感受到了write less,do more的至高境界.前段时间,我也陆续向大家介绍了一些有关jQuery的资 ...
jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
jQuery 特效：盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
力荐 75种jquery特效一键下载用过挺好的
最近"杜圃"对IT的web前端开发特别感兴趣,于是就在搜索网页特效代码,发现jquery这个框架非常好使,于是就迷上了jquery特效,不断的收集jquery的一些简单的网页常用的 ...
一键下载75款常用的jquery特效前端网页代码
最近"杜圃"对IT的web前端开发特别感兴趣,于是就在搜索网页特效代码,发现jquery这个框架非常好使,于是就迷上了jquery特效,不断的收集jquery的一些简单的网页常用的 ...
html特效站长之家,jQuery特效
由于在我们的gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用Animate.css来创建 ...
jquery php抽奖转盘,JQuery+PHP转盘抽奖程序源码下载
本站之前有提供过一个简单易扩展.可控性强的Jquery转盘抽奖程序,主要讲述了前端实现抽奖表现的部分,这里给出另一个完整的php转盘抽奖程序,通过使用jQuery和PHP来实现,用PHP后台代码控制抽 ...
html涟漪特效,基于WebGL的炫酷元素背景水波涟漪jQuery特效
jquery.ripples是一款基于WebGL的效果非常炫酷的元素背景水波涟漪jQuery特效插件.该插件通过强大的WebGL,可以在指定的元素上添加一个水波层,制作出水波涟漪的炫酷效果,并且可以使 ...
jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...
php jquery ajax九宫格抽奖,php+jquery+ajax开发抽奖功能模块下载
php+jquery+ajax实现抽奖系统模块代码如下: 首页在抽奖前需要将所有人员的参与名单在屏幕上滚动显示,所以就用jquery实现了, 1. 参与名单将放在一个txt文件里面,我将放到 phon ...

jQuery特效：实现抽奖

知识点

代码

运行效果

jQuery特效：实现抽奖相关推荐

最新文章

热门文章