jquery实现图像旋转动画

最新推荐文章于 2023-04-25 14:57:46 发布

mengqingyu21

最新推荐文章于 2023-04-25 14:57:46 发布

阅读量943

点赞数

分类专栏： Jquery 文章标签： jQuery ViewUI

Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>    
		<title>jQuery Animation - fadeTo </title>    
		<script type="text/javascript" src="jquery.js"></script> 
   <script type="text/javascript">
   	$(document).ready(function(){
   		$("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward);
   	})  

	function clickMove(){
		var left = $(this).css("left");
		if(left == "350px"){
			loginMove("right",2);
		}
		else if(left == "150px"){
			loginMove("right",1);
		}
		else if(left == "455px"){
			loginMove("right",3);
		}
		else if(left == "650px"){
			loginMove("left",1);
		}
		else if(left == "530px"){
			loginMove("left",2);
		}
		else{
			var cla = $(this).attr("class");   
			switch (cla) {     
				case "login_1": forward("http://www.baidu.com/");break;     
				case "login_2": forward("http://www.google.cn/");break;    
				case "login_3": forward("http://www.163.com/");break;     
				case "login_4": forward("http://www.sina.com.cn/");break;    
				case "login_5": forward("http://www.sohu.com/");break;    
				case "login_6": forward("http://www.qq.com/");break;    
				default: forward('#');   
			} 
		}
	}

     function loginMove(direction,index){	//动画函数
    	var timerId;
    	if(index<=0){
    		clearInterval(timerId);	    //取消动画功能	
    		return;
    	}
     	var div = $("[name='divPop']");	//取得所有div
     	var divLength = div.length;
     	if(direction=="left"){
	    	div[-1] = div[divLength-1]	
	    	var n=-2;
    	}
    	else{
    		div[divLength] = div[0];
	    	var n = 0;
    	}
    	div.each(function(){ 	//jquery封装的动画功能
 			++n;
     		$(this).animate(
	     		{
	     			"top":$(div[n]).css("top"),			//取得下一个目标位置div的参数
	     			"left":$(div[n]).css("left"),
	     			"width":$(div[n]).width(),
	     			"height":$(div[n]).height()
	     		},
	     		600,
	     		function(){	 
    				if($(this).css("top")=='150px'){
   						$(this).css({zIndex:3});	//设置图层置顶	
   					}
   					else if ($(this).css("top")=='170px'){
   						$(this).css({zIndex:2});
   					}
   					else if ($(this).css("top")=='80px'){
   						$(this).css({zIndex:1});
   					}
					else {
   						$(this).css({zIndex:0});
   					}
	     		}
     		);
     	})
     	timerId = setInterval(function(){  
     		loginMove(direction,--index);
   		},650); 
     }  
     function forward(url){
     	window.location.href = url;
     }
   </script>
  </head>
<body>           
<div name="divPop"  class="login_1" style="background-color:#f0f0f0;border:solid 1px ;cursor:pointer; width:355px; height:343px; position:absolute; left:330px; top:150px; z-index:3; filter:alpha(opacity=90);"> 
	<div style="text-align:center;">百度</div>    
</div>
<div name="divPop"  class="login_2" style="background-color:blue;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:650px; top:170px; z-index:2; filter:alpha(opacity=90);">
	<div style="text-align:center;">Google</div> 	
</div>   
<div name="divPop"  class="login_3" style="background-color:yellow;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:530px; top:80px; z-index:1; filter:alpha(opacity=90); ">
	<div style="text-align:center;">网易</div> 	
</div>   
<div name="divPop"  class="login_4" style="background-color:red;border:solid 1px;cursor:pointer; width:105px; height:100px; position:absolute; left:455px; top:50px; z-index:0; filter:alpha(opacity=90); ">
	<div style="text-align:center;">新浪</div> 	
</div>  
<div name="divPop"  class="login_5" style="background-color:#00ff00;border:solid 1px;cursor:pointer; width:136px; height:130px; position:absolute; left:350px; top:80px; z-index:1; filter:alpha(opacity=90); ">
	<div style="text-align:center;font:write">阿里巴巴</div> 	
</div>  
<div name="divPop"  class="login_6" style="background-color:green;border:solid 1px;cursor:pointer; width:220px; height:230px; position:absolute; left:150px; top:170px; z-index:2; filter:alpha(opacity=90); ">
	<div style="text-align:center;font:write">腾讯</div> 	
</div>  

</body>
</html>

mengqingyu21

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图像旋转动画

[code="html"] jQuery Animation - fadeTo $(document).ready(function(){ $("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward); }) fun...
复制链接

扫一扫

专栏目录