JQuery特效之八----摇奖

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

原创最新推荐文章于 2024-04-05 18:33:56 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

85 篇文章

订阅专栏

本文介绍如何使用jQuery Rotate插件实现网页元素的旋转效果。通过HTML、CSS和JavaScript代码结合，创建了一个背景图片上的旋转元素，点击后产生随机角度的旋转动画，并在动画结束后触发回调函数。

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("谢谢参与！");
}