超酷图片变换

最新推荐文章于 2024-10-10 09:56:47 发布

zfmsa

最新推荐文章于 2024-10-10 09:56:47 发布

阅读量143

点赞数

文章标签： javascript ViewUI

<script>
var ticked=0;
var okayToGo = true;
var currentCreature = 1;	
var forwardBackward = 1;									 
var theNewContainer = 1;
var theOldContainer = 2;
function toggleContainers()
{
  theNewContainer = (theNewContainer == 1) ? 2 : 1;
  theOldContainer = (theOldContainer == 1) ? 2 : 1;
}
function moveItem(thisCreature){
  if(okayToGo&& thisCreature != currentCreature){
        toggleContainers();
        
	newCreature = thisCreature;											
	document.getElementById("y"+theNewContainer).style.zIndex = 50+10*forwardBackward;		
	document.getElementById("y"+theOldContainer).style.zIndex = 50+20*forwardBackward;	    
	startTheMove = window.setInterval("rightOrLeft()",20);		
  }
}
function rightOrLeft()											
{
  if (ticked == 1020)											
  {
    window.clearInterval(startTheMove);	
        ticked = 0;						
	forwardBackward = 1;										
	currentCreature = newCreature;								
    okayToGo = true;											
  }
  else
  {
    okayToGo = false;											
	thisAngle = (Math.PI/2)*(ticked/1000);						
	document.getElementById("y"+theNewContainer).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; 
	document.getElementById("y"+theNewContainer).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; 
	document.getElementById("y"+theOldContainer).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; 
	document.getElementById("y"+theOldContainer).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; 
	ticked += 20;												
  }
}
</script>
<a href="javascript:moveItem(1);"><img src="http://t4.baidu.com/it/u=2900771931,2776220722&gp=6.jpg"></a>
<a href="javascript:moveItem(2);"><img src="http://t2.baidu.com/it/u=2879406521,1676348574&gp=44.jpg"></a>
<div align="right" style="position:absolute; right:5px; top:10px; height:435px; width:650px; overflow:hidden;background:#fff">
<div id="y1" style="position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff"><img src="http://www.sjjia.com/shoujitupian/downfileq/rhd/97908f1b2rhdqfn.jpg"></div>
<div id="y2" style="position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff"><img src="http://www.16277.com/caitu/uploadfile/2007/3/28/1057394275129.jpg"></div>
</div>