css3转盘抽奖

最新推荐文章于 2023-10-11 09:37:29 发布

weixin_30877755

最新推荐文章于 2023-10-11 09:37:29 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xuyan1/p/6962685.html

版权

做到一个活动，需要转盘抽奖，于是想到使用css3的动画效果，其中主要包含transition的动画过渡，transform的rotate的旋转效果，在这里只用到2d的旋转，

特别强调的是，因为需要和后台做交互，是后台决定你获得什么奖然后把结果传给前台，还是前台决定你获得什么奖把内容传给后台，这里需要你们自行决定，我在这里使用的是后台决定获奖内容，然后前台控制角度。

这里，我设定转盘在3秒内转5圈，然后计算几等奖，然后转盘转到相应位置。agax属于请求中奖代号，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;padding: 0;
        }
        #parent{
            position: relative;
            width: 310px;
            height: 310px;
        }
        #rotate{
            width: 310px;
            height: 310px;
            transition: all 3s;
        }
        #zhen{
            position: absolute;
            left: 86px;
            top: 65px;
            width: 130px;
            height: 154px;

        }
        .aa{
            width: 130px;
            height: 154px;
        }
    </style>
    <script src="jquery.min.js" type="text/javascript" ></script>
</head>
<body>
    <div id="parent">
        <div id="rotate"><img src="0.png"></div>
        <div id="zhen"><img class="aa" src="pointer2.png"></div>
    </div>

    <script type="text/javascript">
        $(function(){

            var bTag = 0;//点击次数
            $('#zhen').click(function(){
                // $.ajax({
                //     url:'',
                //     type:'get',
                //     data:{
                //         userId:userId
                //     },
                //     success:function(data){
                //         if(data.result){
                //             console.log('您有一次抽奖机会');
                //             //5quan=1800 最低旋转180度
                //             if(data.code == 1){//一等奖
                //                 var  aa = Math.floor(Math.random()*46)+(2160+bTag*1800)+'deg';
                //             }
                //             if(data.code == 2){//二等奖
                //                 var  aa = Math.floor(Math.random()*46)+(2115+bTag*1800)+'deg';
                //             }
                //             if(data.code == 3){
                //                 var  aa = Math.floor(Math.random()*46)+(2070+bTag*1800)+'deg';
                //             }
                //             if(data.code == 4){
                //                 var  aa = Math.floor(Math.random()*46)+(2025+bTag*1800)+'deg';
                //             }
                //             if(data.code == 5){
                //                 var  aa = Math.floor(Math.random()*46)+(1980+bTag*1800)+'deg';
                //             }
                //             if(data.code == 6){
                //                 var  aa = Math.floor(Math.random()*46)+(1935+bTag*1800)+'deg';
                //             }
                //             if(data.code == 7){
                //                 var  aa = Math.floor(Math.random()*46)+(1890+bTag*1800)+'deg';
                //             }
                //             if(data.code == 8){
                //                 var  aa = Math.floor(Math.random()*46)+(1800+bTag*1800)+'deg';
                //             }
                //         }
                //     }
                // })

                bTag++;
                var cc = "rotate("+aa+")";
                console.log(cc);

                $("#rotate").css({'transform':cc})


            })
        })

    </script>

</body>

</html>

转载于:https://www.cnblogs.com/xuyan1/p/6962685.html

weixin_30877755

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3转盘抽奖

做到一个活动，需要转盘抽奖，于是想到使用css3的动画效果，其中主要包含transition的动画过渡，transform的rotate的旋转效果，在这里只用到2d的旋转，特别强调的是，因为需要和后台做交互，是后台决定你获得什么奖然后把结果传给前台，还是前台决定你获得什么奖把内容传给后台，这里需要你们自行决定，我在这里使用的是后台决定获奖内容，然后前台控制角度。这里，我设定转盘在3秒内转5...
复制链接

扫一扫