转盘抽奖特效
来源:互联网 发布:od跳过网络验证 编辑:程序博客网 时间:2024/05/16 17:32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
/*background: url(../img/bg-lottery.png) no-repeat;
background-size: 100% 100%;*/
font-size: 0.15rem;
border-radius: 100%;
display: flex;
display: -webkit-flex;
width: 2.8rem;
height: 2.8rem;
margin-left: 0.35rem;
position: relative;
padding: 0.2rem;
background: url(../img/ly-plate-c.gif) no-repeat;
background-size: 100% 100%;
}
img{
width: 2.8rem;
height: 2.8rem;
}
li{
list-style: none;
display: none;
}
span{
display: block;
background: url(../img/playbtn.png) no-repeat;
background-size: 100% 100%;
width: 0.6rem;
height: 0.6rem;
position: absolute;
margin-top: 1.2rem;
margin-left: 1.1rem;
}
</style>
</head>
<body>
<ul class="zhuanpanfu">
<li class="zhuanpanli">理财金2000元</li>
<li class="zhuanpanli">谢谢参与</li>
<li class="zhuanpanli">理财金5200元</li>
<li class="zhuanpanli">京东の卡</li>
<li class="zhuanpanli">谢谢参与</li>
<li class="zhuanpanli">理财金1000元</li>
<img src="img/bg-lottery.png"/>
<span></span>
</ul>
</body>
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
var viewWidth = $(window).width();
var viewWidth_10=viewWidth/100;
document.documentElement.style.fontSize=document.documentElement.clientWidth/viewWidth_10+'px';
var j=0;
$('span').click(function(){
var i=1;
j++;
var timeflag= setInterval(function(){
if(i<=800){
i+=5;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>800&i<=1300){
i+=4;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1300&i<=1700){
i+=3;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1700&i<=1900){
i+=2;
$('img').css('transform',"rotate("+i+"deg)")
}
else if(i>1900&i<=2000){
i+=1;
$('img').css('transform',"rotate("+i+"deg)");
}
else if(i>2000&i<=2100){
i+=0.6;
$('img').css('transform',"rotate("+i+"deg)");
}
else if(i>2100&i<=2160){
i+=0.4;
$('img').css('transform',"rotate("+i+"deg)");
}
else{
clearInterval(timeflag)
}
},1)
})
})
</html>
- 转盘抽奖特效
- 转盘抽奖
- 抽奖转盘
- 抽奖转盘
- 转盘抽奖
- 抽奖转盘
- 转盘抽奖
- 抽奖转盘
- 抽奖转盘
- 转盘抽奖
- 抽奖转盘
- html5抽奖转盘生成器
- 转盘抽奖案例
- Android抽奖转盘代码
- 抽奖大转盘
- 转盘抽奖游戏
- 大转盘抽奖算法
- java实现转盘抽奖;
- 《Machine learning for OpenCV》 Windows下的Anaconda+OpenCV的环境配置
- 基于Java+SparkStreaming整合kafka编程
- Codeforces Round #426 (Div. 1) C. Ever-Hungry Krakozyabra(搜索)
- 初来乍到
- Kendo控件封装
- 转盘抽奖特效
- 矩阵分析与应用(二)——内积与范数
- zoj2588(tarjan求割边)
- Codeforces 834D The Bakery DP(线段树维护)
- html5学习笔记
- 解决 Button 设置 background 之后点击动画效果消失的问题
- 发现web-inf下的jsp可以直接访问的一个方法
- 建造者模式(builder)c++版本
- 搭建简单的mongodb服务器