标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转图册</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function () {
//计算图片总数
var imgCount = $(".photos>img").size();
//给每张图片赋一个初始的旋转角度
var defaultRotate = -20;
function defaultState() {
for (var i = 0; i < imgCount; i++) {
var imgRotate = defaultRotate + i * 10 + "deg";
$(".photos>img:eq(" + i + ")").css("transform", "rotate(" + imgRotate + ")");
}
}
//调用初始角度的方法
defaultState();
//鼠标移上之后
var newRotate = -80;
$(".photos>img").mouseover(function () {
//给每张图片赋一个新的旋转角度
for (var i = 0; i < imgCount; i++) {
var imgRotate = newRotate + i * 40 + "deg";
$(".photos>img:eq(" + i + ")").css("transform", "rotate(" + imgRotate + ")")
}
var index = $(this).index();
var imgRotate = 0;
switch (index) {
case 0:
imgRotate = -80;
break;
case 1:
imgRotate = -40;
break;
case 2:
imgRotate = 0;
break;
case 3:
imgRotate = 40;
break;
case 4:
imgRotate = 80;
break;
default:
break;
}
imgRotate = imgRotate + "deg";
//当前图片旋转和放大,以及顶层显示
$(this).css({"transform": "scale(1.1) rotate(" + imgRotate + ")", "z-index": "1"});
})
//恢复z-index的值
$("img").mouseleave(function () {
$(this).css("z-index", "0");
})
//恢复原始状态
$(".photos").mouseleave(function () {
defaultState();
})
})
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.photos {
width: 200px;
margin: 100px auto;
}
img {
width: 200px;
height: 300px;
position: absolute;
transform-origin: center 120%;
-webkit-transform-origin: center 120%;
-ms-transform-origin: center 120%;
-o-transform-origin: center 120%;
-moz-transform-origin: center 120%;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
}
</style>
</head>
<body>
<div class="photos">
<img src="images/1.jpg" title=""/>
<img src="images/2.jpg" title=""/>
<img src="images/3.jpg" title=""/>
<img src="images/4.jpg" title=""/>
<img src="images/5.jpg" title=""/>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/lingchuang/p/4479779.html
