jquery圖片3D旋繞效果 rotate3Di的操作



這是一個圖片效果,很簡單實用,只需要一個"rotate3Di.js"的插件就行,

關於rotate的用法有如下幾種:

$(選擇器).rotate3Di(30); //把圖片3D旋轉30度

$(選擇器).rotate3Di(180, 1000);//經過1s把圖片3D順時針旋轉180度

$(選擇器).rotate3Di('-=180', 1000);//每過1s把圖片3D逆時針旋轉180度

$(選擇器).rotate3Di('flip', 1000);//經過1s把圖片逆時針旋轉180度

$(選擇器).rotate3Di('unflip', 1000);//與'flip'連用

$(this).rotate3Di('toggle', 1000);//相當於'flip'和'unflip'連用

下面是一段鼠標移過時和移走時圖片3D旋轉的一段代碼:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div class="iii" style="width:500px;height:400px;background:red;" class="iii">
<img src="images/0.jpg" name="imge1" class="ii" alt="" />
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="rotate3Di.js"></script>
<script type="text/javascript">
$(".iii").mouseover(function(){
$(".ii").stop().rotate3Di(180,1000);
});
$(".iii").mouseout(function(){
$(".ii").stop().rotate3Di(0,1000);
});
</script>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM