jquery.rotate.js实现转盘抽奖活动
时间:2022-07-24
本文章向大家介绍jquery.rotate.js实现转盘抽奖活动,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
效果图
<!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看效果
- Silverlight与WPF中BeginInvoke的差异
- Linux下部署SSH登录时的二次身份验证环境记录(利用Google Authenticator)
- Linux下DNS简单部署(主从域名服务器)
- 本地yum源部署记录
- silverlight4:摄像头占用状态检测以及二种截屏方法
- Flash/Flex学习笔记(16):如何做自定义Loading加载其它swf
- 台胞也能发红包喽!小编手把手教你搞定微信支付!
- 获取可视区域高度赋值给div(解决document.body.clientHeight的返回值为0的问题)
- Docker管理工具-Swarm部署记录
- 聊一聊大数据的问题和缺陷
- Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag)
- 原来Silverlight 4中是可以玩UDP的!
- Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播
- Flash/Flex学习笔记(11):如何检测摄像头是否被占用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用TypeScript积累自己的类库
- 在Egret项目中使用protobuf
- JavaScript原型与继承
- 当TKE遇上Coding, 业务如何实现快速迭
- cocos creator 1.x透明渐变效果实现
- Cocos Creator 2.x透明渐变效果实现
- Themeleaf通过ajax局部更新
- ubuntu下利用expect实现screen多窗口开机运行
- hetzner服务器购买和安装debian系统
- 安全通告 | Apache SkyWalking SQL注入漏洞安全风险公告(CVE-2020-13921)
- Cmd Markdown 迁移备份的流程
- PyTorch3:计算图torch.autograph
- spark shell 配置 Kryo 序列化
- Mac里捣腾Kerberos(一)
- Spark on K8S 访问 Kerberized HDFS