抽奖转圈js

最新推荐文章于 2022-12-09 10:51:46 发布

777zhangsan

最新推荐文章于 2022-12-09 10:51:46 发布

阅读量177

点赞数

分类专栏： js h5 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41269564/article/details/120968518

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

展示效果
在这里插入图片描述

页面格式
// drawD --默认样式class 、drawDR --需要展示的样式class

<div class="luckDraws">
	  <div class="luckDraw luckDraw1 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	    <div class="luckDraw luckDraw2 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	    <div class="luckDraw luckDraw3 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	      <div class="luckDraw luckDraw4 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	     <div class="luckDraw luckDraw5 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	    <div class="luckDraw luckDraw6 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	    <div class="luckDraw luckDraw7 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
	     <div class="luckDraw luckDraw8 drawD">
	         <img src="***.png"/>
	         <p>文字文字</p>
	     </div>
 </div>

点击抽奖按钮之后js
//封装function

function animateRote(){
    for(var i=1;i<=8;i++){
        setTimeout(function (i) {
            $(".luckDraw"+i+"").removeClass("drawD").addClass("drawDR");
            setTimeout(function () {
                $(".luckDraw"+i+"").removeClass("drawDR").addClass("drawD");
            },100);
        },100*i,i);
    }
}