JQuery特效之八----摇奖

最新推荐文章于 2024-04-05 18:33:56 发布

Eric010101

最新推荐文章于 2024-04-05 18:33:56 发布

阅读量215

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84775808

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/zhongjiang.css"/>
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/jquery/jquery.rotate.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/js/zhongjiang.js"></script>
</head>
<body>
   
   <div id="d1"></div>
   <div id="d2"></div>
   
    
    
</body>
</html>

注意要引入jquery插件jquery.rotate；

css：

*{
padding: 0px;
    margin: 0px;
}

body{
background-color: #F36;
}

#d1{
width: 661px;
    height: 655px;
    background-image: url(../imgs/bg.jpg);
}
#d2{
width: 214px;
    height: 214px;
    background-image: url(../imgs/rotate-static.png);
    position: absolute;
    top:230px;
    left:220px;
    cursor: pointer;
}

js：

var raNum;
$(function(){
    var i=0;
    $("#d2").click(function(){
        
    raNum = Math.random()*360;
        $(this).rotate({
        duration:2000,
            angle:0,
            animateTo:raNum+720,
            callback:function(){
                A();    
            }
        });
        
        
        
        
        
        
    });
    
    
    
//    $("#d2").rotate({bind:{
//    click:function(){
//                     raNum = Math.random()*360;
//        $(this).rotate({
//                     duration:2000,
//            angle:0,
//            animateTo:raNum+720,
//            callback:function(){
//                A();    
//            }
//            })
//        }
//    }
});


function A(){
alert("谢谢参与！");
}

Eric010101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效之八----摇奖

html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta name="viewport" conten
复制链接

扫一扫

专栏目录