赞
踩
jQuery手机端转盘抽奖插件是一款用js定时器来控制角度变化,先来看看效果:
一部分关键的代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
- <script src="jquery.min.js"></script>
- <script src="rotaryDraw.js"></script>
- <title>jQuery手机端转盘抽奖插件</title>
- <style>
- *{padding:0;margin:0;}
- body{
- background:#f03200;
- }
- .box{
- position:relative;
- max-width:750px;
- margin:0 auto;
- }
- .box .img01{
- width:100%;
- }
- .box .drawBtn{
- position:absolute;
- width:10rem;
- height:auto;
- left:50%;
- margin-left:-5rem;
- }
- .box1{
- position:relative;
- max-width:750px;
- margin:0 auto;
- }
- .box1 .img01{
- width:100%;
- }
- .box1 .drawBtn2{
- position:absolute;
- width:10rem;
- height:auto;
- left:50%;
- margin-left:-5rem;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <img src="images/img_01.png" class="img01" alt="">
- <img src="images/img_03.png" class="drawBtn">
- </div>
- <div class="box1">
- <img src="images/img_02.png" class="img01" alt="">
- <img src="images/img_03.png" class="drawBtn2">
- </div>
- <script>
- $(".box .img01").load(function() {
- var obj = $(".drawBtn");
- var hei = $(this).height();
- var hei2 = obj.height();
- obj.css("top",(hei - hei2)/2);
- });
- $(".box1 .img01").load(function() {
- var obj = $(".drawBtn2");
- var hei = $(this).height();
- var hei2 = obj.height();
- obj.css("top",(hei - hei2)/2);
- });
- </script>
- <script>
- //share份额[数字没有默认],
- //speed速度[单位s,最小0.1s],
- //velocityCurve速度曲线[linear匀速,ease慢快慢,ease-in慢慢开始,ease-out慢慢结束,ease-in-out慢快慢等,用的是css3的速度曲线],可以不写,ease默认值;
- //callback回调函数
- //weeks几周[默认2周,可以不写]
-
- //几份和回调函数这两个参数是必填
-
-
- function callbackA(ind)
- {
- alert("第一个回调"+ind);
- };
- function callbackB(ind)
- {
- alert("第二个回调"+ind);
- };
- var newdraw =new turntableDraw('.drawBtn',{
- share:8,
- speed:"3s",
- velocityCurve:"ease",
- weeks:6,
- callback:function(num)
- {
- callbackA(num);
- },
- });
- var newdraw2 =new turntableDraw('.drawBtn2',{
- share:12,
- speed:"3s",
- velocityCurve:"ease",
- weeks:6,
- callback:function(num)
- {
- callbackB(num);
- },
- });
- $(".drawBtn").click(function(event) {
- //ajax
- newdraw.goto(parseInt(Math.random()*8)+1);
- });
- $(".drawBtn2").click(function(event) {
- //ajax
- newdraw2.goto(parseInt(Math.random()*12)+1);
- });
- </script>
-
- <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
- <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
- </div>
- </body>
- </html>
全部代码:jQuery手机端转盘抽奖插件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。