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

jquery仿淘宝抽奖转盘插件-jqueryrotate.js使用实例及demo下载

作者: IT小兵 | 2014年11月15日| 热度:℃ | 评论: |参与:

在[Jquery 移动浏览器仿淘宝大转盘抽奖插件jqueryrotate] [jquery仿各大商城网站圆形转盘抽奖活动]介绍了jqueryrotate的使用和步骤。

今天再分享一下美化后的转盘。

预览地址:http://www.uxsou.com/1111/lottery/index.html

demo下载:http://files.cnblogs.com/xiaomou2014/lottery.rar 

代码:

<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转盘抽奖</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/Rotate.js"></script>
<style>
*{padding:0; margin:0;}
.lotteryMain{ width:100%; padding:20px 0; }
.lotteryBg{ width:520px; height:520px; margin:0 auto; background:url(images/lotteryBg.jpg) no-repeat; position:relative; overflow:hidden;}
#run{ width:153px; height:214px; position:absolute; left:50%; top:50%;  margin-left:-76px; margin-top:-107px; z-index:1; transform:rotate(0deg); -ms-transform:rotate(0deg); }
#btn_run{ width:125px; height:125px; background:url(images/btn_start.png) no-repeat; border:none; outline:none; position:absolute; left:50%; top:50%; margin-left:-62px; margin-top:-62px; z-index:2;cursor:pointer;}
</style>
</head>
<body>
<section class="lotteryMain">
    <div class="lotteryBg">
        <img id="run" src="images/start.png" />
        <input id="btn_run" type="button" value="" />
    </div>
    <div id="results">
    
    </div>
</section>  
<script>
$(function(){ 
     $("#btn_run").click(function(){
        $("#btn_run").attr('disabled',true).css("cursor","default"); 
        lottery(); 
    });
}); 
function lottery(){ 
    $.ajax({ 
        type: 'get', 
        url: 'json2.js', 
        dataType: 'json', 
        cache: false, 
        error: function(){return false;}, 
        success:function(obj){
                $("#run").rotate({ 
                    duration:3000, //转动时间 
                    angle: 0, //默认角度
                    animateTo:360*6+obj.rotate, //转动角度 
                    easing: $.easing.easeOutSine, 
                    callback: function(){ 
                        alert(obj.results); 
                    $("#btn_run").attr('disabled',false).css("cursor","pointer"); 
                    } 
                });
        } 
    }); 
};
    
</script>  
</body>
</html>


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

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

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

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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