漂亮的图片移动控制特效

<style type="text/css">
#mainid{
position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid

#666666;
} .imgbox{
position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff
}
.moveimgbox{
position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff
}
</style>

<script>
var ticked=0;
var okayToGo = true;
var currentCreature = 1;
var forwardBackward = 1;
var firstnum = 1;
var secnum = 2;
var tounum=1;
function moveItem(firstnum,secnum){

if(okayToGo&& firstnum != secnum){ tounum=firstnum;
document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward;
document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward;
startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20);
}

}

function rightOrLeft(firstnum,secnum) {

if (ticked == 1020) {
window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true;
} else {
okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+firstnum).style.left = " "+(735-

Math.sin(thisAngle)*700)+"px";
document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px";

document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px";
document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px";
ticked += 20;
}

}
</script>

<a href="javascript:moveItem(1,tounum);"><img src="http://www.3lian.com/edu/img/js/200909/s1.jpg" width="129"

height="97"></a>
<a href="javascript:moveItem(2,tounum);"><img src="http://www.3lian.com/edu/img/js/200909/s2.jpg" width="134"

height="100"></a>
<br/>
<a href="javascript:moveItem(3,tounum);"><img src="http://www.3lian.com/edu/img/js/200909/s3.jpg" width="134"

height="100"></a>
<a href="javascript:moveItem(4,tounum);"><img src="http://www.3lian.com/edu/img/js/200909/s4.jpg" width="101"

height="134"></a>

<div align="right" id="mainid">

<div id="y1" class="imgbox"><img src="http://www.3lian.com/edu/img/js/200909/1.jpg" width="500" height="300"></div>
<div id="y2" class="moveimgbox"><img src="http://www.3lian.com/edu/img/js/200909/2.jpg" width="500" height="300"></div>

<div id="y3" class="moveimgbox"><img src="http://www.3lian.com/edu/img/js/200909/3.jpg" width="500" height="300"></div>
<div id="y4" class="moveimgbox"><img src="http://www.3lian.com/edu/img/js/200909/4.jpg" width="500" height="300"></div>

</div>