现在位置首页 / 前端开发 /正文

jquery仿各大商城网站圆形转盘抽奖活动

作者: IT小兵 | 2013年8月26日| 热度:℃ | 评论: |参与:


jquery仿各大商城网站圆形转盘抽奖活动,淘宝商城圆形转盘抽奖活动、天猫商城圆形转盘抽奖活动、京东商城圆形转盘抽奖活动等。

用法:

jquery 抽奖转盘

Demo

1.引入jQuery和相关插件后

 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
     <script type="text/javascript" src="js/jQueryRotate.2.2.js"></script>

2.定义圆盘内容 

     <div id="lottery">    
         <img id="imgs" src="images/disc-rotate.gif" viewbox="0 0 352 30" class="image" />    
         <div class="arrow"></div>    
         <div class="lot-btn first">    
             <span></span>    
         </div>    
    </div>
 

3.定义CSS


01    *{margin:0;padding:0;list-style-type:none;}    
02    a,img{border:0;}    
03    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}    
04    /* lottery */    
05    #lottery{background:url("images/disc-bg.gif") no-repeat;position:relative;height:450px;width:450px;margin:40px auto;}    
06    #lottery .image{position:absolute;left:47px;top:47px;width:352px;height:352px;}    
07    #lottery .arrow{background:url("images/arrow.png") no-repeat;height:191px;left:207px;position:absolute;top:91px;width:32px;}    
08    #lottery .arrow{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/arrow.png');}    
09    #lottery .lot-btn{height:92px;left:177px;overflow:hidden;position:absolute;top:181px;width:91px;}    
10    #lottery .lot-btn span{cursor:pointer;display:block;height:92px;position:relative;width:91px;}    
11    #lottery .first span{background:url("images/buttons_01.png") no-repeat;}    
12    #lottery .first span{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/buttons_01.png');}
  

4.使用插件提供的方法 

01    $(function(){    
02        $(".lot-btn").click(function(){    
03            for(var i = 0; i <= 10000; i++){    
04                $("#imgs").rotate({    
05                    animateTo: i,    
06                    duration: 10000    
07                });    
08                if (i >= 3162){ //设置转盘停位置    
09                    break;    
10                }    
11            }    
12        })    
13    });


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询