歡迎您光臨深圳思途科技有限公司！
全國熱線：0755-82345 295 / 24小時服務熱線：189 2744 8938
全國熱線：0755-82345 295 / 24小時服務熱線：189 2744 8938
全國熱線：0755-82345 295 / 24小時服務熱線：189 2744 8938
在深圳企業網站設計公司之前做很多項目的時候，都需要給前端界面添加很多動畫效果，其中用的特別多的一個就是點擊div要讓圖片進行一定角度的旋轉，那今天就和大家一起來分享這個代碼。
第一步我們要下載jquery.min.js 和jquery.rotate.js這兩個文件
其中html代碼如下：
<body>
<div>
<h4>示例一：鼠標滑過旋轉圖片</h4>
<img id="img1" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例二：圖片無限旋轉</h4>
<img id="img2" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例三：點擊圖片旋轉</h4>
<img id="img3" src="../imgs/safari.png" />
</div>
<br/>
<div>
<h4>示例四：旋轉不同角度圖片</h4>
<img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>
<input type="button" value="順時針旋轉90度" onClick="ImgRotate(0)"/> <br/><br/>
<input type="button" value="逆時針旋轉90度" onClick="ImgRotate(1)"/> <br/><br/>
<input type="button" value="順時針旋轉180度" onClick="ImgRotate(2)"/><br/><br/>
<input type="button" value="順時針旋轉270度" onClick="ImgRotate(3)"/><br/><br/>
</div>
</body>
那么jquery的代碼如下：
<script>
$(function(){
//示例三：點擊圖片旋轉角度（這段js放在示例一后面沒有效果，暫不知原因）
var value = 0;
$("#img3").rotate({
bind:
{
click: function(){
value +=90;
$(this).rotate({ animateTo:value})
}
}
});
//示例一: 鼠標滑過旋轉圖片
$("#img1").rotate({
bind:{
mouseover : function() {
$(this).rotate({animateTo:180});
},
mouseout : function() {
$(this).rotate({animateTo:0});
}
}
});
//示例二：圖片無限旋轉
var angle = 0;
setInterval(function(){
angle+=3;
$("#img2").rotate(angle);
},10);
});
//示例四：圖片旋轉不同角度
var ImgRotate = function(i){
switch(i)
{
case 0:
$('#img4').rotate(90);
break;
case 1:
$('#img4').rotate(-90);
break;
case 2:
$('#img4').rotate(180);
break;
case 3:
$('#img4').rotate(270);
break;
}
}
</script>
其實簡單的幾部就可以實現。希望對你的前端開發有所幫助。
百度統計
粵ICP備17159687號
深公網安備 52020404001108號