<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" content=""/>
<title>图片旋转展示</title>
<style type="text/css">
#show{
position:relative;
margin:20px auto;
width:800px;
border:1px solid #999999;
}
.item{
position:absolute;
height:40px;
width:60px;
background:#999999;
border:1px solid #eeeeee;
cursor:pointer;
}
</style>
<script type="text/javascript" language="javascript">
var len;
var showerObj;
var listObj;
var showerWidth = 500;//改变宽度
var showerHeight = 400;//改变 高度
var r;
var cR = 0;
var ccR = 0;
var timer = 0;
window.onload = function () {
showerObj = document.getElementById("show");
listObj = showerObj.getElementsByTagName("div");
len = listObj.length;
r = Math.PI / 180 * 360 / len;
for (var i = 0; i < len; i++) {
var item = listObj[i];
item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2 - 20 + "px";
item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 - 30 + "px";
item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);
//单击某一项事件
item.onclick = function () {
cR = Math.PI / 2 - this.rotate;
timer || (timer = setInterval(rotate, 10));
}
}
var rX = showerObj.offsetLeft + showerWidth / 2;
var ry = showerObj.offsetTop + showerHeight / 2;
var rotate = function () {
ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);
if (cR - ccR < 0) cR = cR + 2 * Math.PI;
if (cR - ccR < Math.PI) {
ccR = ccR + (cR - ccR) / 19;
} else {
ccR = ccR - (2 * Math.PI + ccR - cR) / 19;
}
if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI / 720) {
ccR = cR;
clearInterval(timer);
timer = 0;
}
for (var i = 0; i < len; i++) {
var item = listObj[i];
var w, h;
var sinR = Math.sin(r * i + ccR);
var cosR = Math.cos(r * i + ccR);
w = 60 + 0.6 * 60 * sinR;
h = (40 + 0.6 * 40 * sinR);
item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR * showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 + sinR * showerWidth / 2 / 3 - w / 2) + ";";
}
}
document.getElementById("l").onclick = function () {
cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);
timer || (timer = setInterval(rotate, 10));
}
document.getElementById("r").onclick = function () {
cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);
timer || (timer = setInterval(rotate, 10));
}
rotate();
}
</script>
</head>
<body>
<input id="l" type="button" value="left" />
<input id="r" type="button" value="right" />
<div id="show">
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg16.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg17.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg18.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg15.png" style="width:100%;height:100%" />
</div>
<div class="item">
<img src="protosite/images/bg16.png" style="width:100%;height:100%" />
</div>
<!--<div class="item">8</div>
<div class="item">9</div>
<div class="item">0</div>
<div class="item">a</div>
<div class="item">b</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>-->
</div>
</body>
</html>
JavaScrip实现3D旋转动态效果