`
mengqingyu
  • 浏览: 333307 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

jquery实现图像旋转动画

阅读更多
<!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>
分享到:
评论

相关推荐

    jQuery实现图像旋转动画效果

    jQuery 实现图像旋转动画效果是网页动态效果中的常见需求,它能为用户体验增添趣味性和互动性。在本篇文章中,我们将探讨如何使用 jQuery 来创建图像旋转动画,并通过具体的代码示例来理解其工作原理。 首先,确保...

    jQuery 实现立体旋转木马

    3. **动画**:jQuery的`.animate()`方法可以用于创建平滑的动画效果,结合CSS3转换,我们可以实现卡片的平滑旋转和进出。 4. **事件处理**:jQuery的`.on()`方法用于绑定事件监听器,例如点击事件,当用户点击下...

    jquery实现图片旋转(js实现)

    本文将深入探讨如何使用jQuery来实现图片旋转功能,并兼容IE、Firefox、Opera和Chrome等主流浏览器。 首先,要实现图片旋转,我们需要理解CSS3中的`transform`属性,尤其是`rotate()`函数。`rotate()`允许我们以...

    jquery实现3D旋转轮播图片代码.zip

    3. JavaScript文件:主要的jQuery代码,实现轮播功能,包括图片的切换逻辑、3D旋转动画等。 4. 图片文件:实际展示的轮播图片。 5. 可能还包含其他辅助文件,如图标、JSON配置文件或README文档,提供关于如何使用和...

    jquery实现360度旋转

    本文将深入探讨如何使用jQuery实现360度图像旋转效果,这是一种常见于产品展示、虚拟现实或互动设计中的技术。 首先,要实现360度旋转,我们需要准备一系列连续拍摄的产品图片,这些图片通常是围绕产品中心360度...

    3D旋转展示产品图片的特效,基于jQuery实现.rar

    5. **动画实现**:在点击事件处理函数中,通过修改CSS3的`transform`属性值,实现3D旋转。可以使用`transition`属性控制旋转的平滑过渡效果,以及`transform-style: preserve-3d;`保持3D空间中的子元素。 6. **控制...

    jquery 360度旋转插件

    elbeanio-jquery.tagsphere还支持自定义事件,比如在旋转开始、结束或者达到特定角度时触发回调函数,这为开发者提供了更多可能性,可以结合其他功能如动画、数据交互等进行更复杂的场景构建。 总结来说,elbeanio-...

    jQuery切割过渡效果图像滑块.zip

    具体实现可能涉及到CSS3的transform属性,例如translateX和rotate,结合jQuery的动画函数,精确控制每个切片的移动和旋转,以形成连续而富有动态感的过渡。 左右箭头是用户导航的重要组成部分,它们允许用户手动...

    jquery+css3实现图像三维旋转效果.zip

    下面将详细阐述如何使用这些技术来创建动态的、视觉吸引人的图像旋转效果。 首先,`index.html` 是主网页文件,它包含了页面的基本结构和引用外部资源的链接。在 HTML 中,通常会有一个 `&lt;div&gt;` 元素用于包裹要旋转...

    jquery 3D图片旋转木马_图片叠加自动轮播旋转切换代码

    为了实现平滑的过渡效果,jQuery提供了animate方法,可以创建自定义的动画效果,包括3D旋转。结合CSS3的transition属性,可以实现流畅的动画过渡,提高用户体验。 在实际开发中,还需要考虑浏览器兼容性问题,因为...

    jQuery按钮控制叠加图片旋转木马切换代码.zip

    本示例中的“jQuery按钮控制叠加图片旋转木马切换代码”是一个利用jQuery实现的交互式图片展示功能,常用于产品展示或者图像滑动效果。下面我们将深入探讨这一技术的核心知识点: 1. **jQuery库**:jQuery是...

    jquery圆形旋转特效.zip

    这个特效的核心在于jQuery的动画功能,它通过修改CSS属性(如transform和transition)来实现元素的旋转效果。在CSS中,`transform`属性允许我们对元素进行旋转、缩放、移动等变换,而`transition`属性则定义了这些...

    jQuery+CSS3旋转动画轮播幻灯特效代码

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个具有旋转动画效果的轮播幻灯片特效。这个特效可以为网站增添动态视觉吸引力,提高用户体验,尤其适用于产品展示或图片滑动导航。 首先,jQuery是一个强大的...

    jQuery图像旋转插件jQueryReel.zip

    Reel 是现今建立的功能最全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影,全景或者定格动画。在线演示 标签:jQuery

    Jquery实现的转盘抽奖

    - JavaScript文件(可能包括jQuery库):实现抽奖逻辑,包括点击事件处理、动画效果、随机数生成和概率控制。 - 图片资源:可能包括转盘的背景图、奖品图标等。 综上所述,实现一个jQuery转盘抽奖功能需要结合HTML...

    HTML—jquery特效3D立体图像查看

    在3D图像查看器中,jQuery可以帮助我们更便捷地响应用户的交互,如点击、拖动等,并实现平滑的图像旋转或缩放动画。 要实现3D立体图像查看,我们需要理解以下几个关键概念: 1. **CSS3 3D变换**:CSS3提供了...

    jQuery头像左右动画旋转并支持裁剪

    在本文中,我们将深入探讨如何使用jQuery实现头像的左右动画旋转以及支持裁剪功能。jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互等任务。对于创建动态和交互式的网页...

    jquery 3D立体图像查看

    本文将深入探讨"jQuery 3D立体图像查看"这一主题,这通常指的是利用jQuery来实现一种增强用户体验的3D图像展示技术。 首先,我们需要理解3D图像查看的基本原理。在网页中,3D效果通常是通过CSS3的transform属性或者...

Global site tag (gtag.js) - Google Analytics