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