公司項目比較老，css用的也老，所以一些css3的特效作者基本都沒怎么關注，今天看了一下css3中的transform
發現可以讓div進行旋轉，覺得有一些常見的特效可以自己實現下，於是做了做，效果還可以，我把代碼貼出來，
記錄一下，萬一哪天用上了呢，是吧。
這篇用的都是jQuery的css，因為不同瀏覽器的兼容樣式名字不一樣，設置起來太麻煩了，感覺有輪子可用，何苦呢。
另外我原生js也不太好，而且給其他人未必能維護好。
1)div隨着鼠標進行旋轉
主要的js代碼如下
1 $(document).ready(function () { //我管那個div叫button，本來是想設計按鈕來的 2 //要button中心得重新計算中心點，目前用左上角 3 4 $btn = $('.btn'); 5 var offset = $btn.offset(); 6 7 8 $(window).mousemove(function (event) { 9 mouseY = event.clientY; 10 mouseX = event.clientX; //這兩句主要找到mouse的坐標值 11 dy = mouseY - offset.top; 12 dx = mouseX - offset.left;//確定一下鼠標和div的坐標差值 13 angle = Math.atan2(dy, dx) / Math.PI*180; //arctan算出角度 14 $btn.css({ 'transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)' });//利用jQuery減少兼容性的麻煩，並設置樣式 15 }); 16 17 18 });
完整的html如下
1 <html> 2 3 <head> 4 <meta charset='utf8' /> 5 <style type='text/css'> 6 * { 7 margin: 0; 8 padding: 0; 9 } 10 11 body { 12 background: lightseagreen; 13 } 14 15 .btn { 16 background: pink; 17 height: 40px; 18 width: 100px; 19 left: 400px; 20 top: 100px; 21 position: absolute; 22 display: inline-block; 23 text-align: center; 24 border-style: solid; 25 border-color: deeppink; 26 /* box-shadow:10px 10px 10px 10px black; */ 27 box-sizing: border-box; 28 /* transform: rotate(-45deg); */ 29 user-select: none; 30 } 31 32 .btn:hover { 33 background: deeppink; 34 } 35 </style> 36 <script type='text/javascript' src="../jQuery/jquery-1.9.0.min.js"></script> 37 <script type='text/javascript'> 38 $(document).ready(function () { 39 //要button中心得重新計算中心點，目前用左上角 40 41 $btn = $('.btn'); 42 var offset = $btn.offset(); 43 44 45 $(window).mousemove(function (event) { 46 mouseY = event.clientY; 47 mouseX = event.clientX; 48 dy = mouseY - offset.top; 49 dx = mouseX - offset.left; 50 angle = Math.atan2(dy, dx) / Math.PI*180; 51 $btn.css({ 'transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)' }); 52 }); 53 54 55 }); 56 </script> 57 </head> 58 59 <body> 60 <div class='btn'>按一下</div> 61 </body> 62 63 </html>
2.div自己轉動，和div的變速轉動
這部分是我用setInterval自己轉動的，不過總得計算，我想如果要想改進的話，應該是用數組存起來360的每一幀的角度，然后在用setInterval循環取就好了。
不過當前沒這么些，相信客戶端還是能承受的:)
1 $(document).ready(function () { 2 3 //固定速度旋轉 4 $btn = $('.btn'); 5 var av = 2;//固定的角速度 6 var angle = 0; 7 $btn.css({'transform':'rotate('+angle+'deg)'}); 8 9 setInterval(function(){ 10 angle+=av; //每幀加上速度 11 if(angle/360==1) 12 angle=0; 13 $btn.css({'transform':'rotate('+angle+'deg)'}); 14 },25); 15 16 //變速旋轉 17 $btn2 = $('.btn2'); 18 19 var av2=0; 20 var ava2=0.3;//設置角度加速度 21 var angle2=0; 22 $btn2.css({'transform':'rotate('+angle2+'deg)'}); 23 setInterval(function(){ 24 av2+=ava2; //每幀速度,加上角速度的加速度,形成變速 25 angle2+=av2; 26 if(av2>=20||av2<=0) //考慮也不能老加速，太快看不見了,設置一個封頂速度是20,一旦到了上限就開始減速，減到0再加，當然可以設置負數，肯定是又逆向轉一下 27 ava2=-ava2; 28 if(angle2/360>1) 29 angle2=0; 30 $btn2.css({'transform':'rotate('+angle2+'deg)'}); 31 },20); 32 33 });
完整的html
<html>
<head>
<meta charset='utf8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: lightseagreen;
}
.btn {
background: pink;
height: 40px;
width: 100px;
left: 400px;
top: 100px;
position: absolute;
display: inline-block;
text-align: center;
border-style: solid;
border-color: deeppink;
box-sizing: border-box;
user-select: none;
}
.btn2 {
background: pink;
height: 40px;
width: 100px;
left: 550px;
top: 100px;
position: absolute;
display: inline-block;
text-align: center;
border-style: solid;
border-color: deeppink;
box-sizing: border-box;
user-select: none;
}
.btn:hover {
background: deeppink;
}
</style>
<script type='text/javascript' src="../jQuery/jquery-1.9.0.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
//先按固定速度旋轉
$btn = $('.btn');
var av = 2;
var angle = 0;
$btn.css({'transform':'rotate('+angle+'deg)'});
setInterval(function(){
angle+=av;
if(angle/360==1)
angle=0;
$btn.css({'transform':'rotate('+angle+'deg)'});
},25);//這里設置的幀數為40幀，一開始設置25幀有點卡...
$btn2 = $('.btn2');
var av2=0;
var ava2=0.3;
var angle2=0;
$btn2.css({'transform':'rotate('+angle2+'deg)'});
setInterval(function(){
av2+=ava2;
angle2+=av2;
if(av2>=20||av2<=0)
ava2=-ava2;
if(angle2/360>1)
angle2=0;
$btn2.css({'transform':'rotate('+angle2+'deg)'});
},20); //設置的50幀，變速么，流暢點，不知道理解對不對
});
</script>
</head>
<body>
<div class='btn'></div>
<div class='btn2'></div>
</body>
</html>