jquery.rotate.js实现转盘抽奖活动
jquery.rotate.js实现转盘抽奖活动
明知山
发布于 2020-09-03 10:37:04
发布于 2020-09-03 10:37:04
效果图
在这里插入图片描述
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jqueryrotate积分抽奖效果演示</title>
<style>
* {
margin: 0;
padding: 0;
}
::-webkit-scrollbar {
display: none
}
.round {
position: relative;
}
.turnImg {
width: 100%;
height: 100%;
}
.begin {
position: absolute;
width: 13%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.begin img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="round">
<img class="turnImg" src="http://sucai.suoluomei.cn/sucai_zs/images/20190926090636-1.png" alt="" />
<div class="begin">
<img src="http://sucai.suoluomei.cn/sucai_zs/images/20190924162756-kaishiaa.png" alt="" />
</div>
</div>
</body>
<script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js "></script>
<script src="https://cdn.suoluomei.com/common/js2.0/jquery.rotate/jquery.rotate.min.js"></script>
<script>
$(function () {
var flog = true
$(".round").rotate({
bind: {
click: function () {
if (flog) {
flog = false
var math = Math.floor(Math.random() * 10);
var sectorId = math //选中的奖品地址是需要后台传给你
var part = 14 //奖品的总个数
var defaultRotate = 1800 //一圈360度，旋转5圈
var setRotate = (360 / part) * sectorId - (360 / part) / 2 //计算定位到指定商品在商品的中间
var allRotate = defaultRotate + setRotate //总旋转度数
$('.turnImg').rotate({
duration: 10000,
angle: 0,
animateTo: allRotate,
callback: function () {
flog = true
console.log($('.turnImg')[0].style.transform)
}
})
}
}
}
})
})
</script>
</html>代码直接copy看效果
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-09-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读