jQuery图片九宫格鼠标悬停滑动切换特效代码下载


jQuery图片九宫格鼠标悬停滑动切换特效代码下载
jQuery图片九宫格鼠标悬停滑动切换特效代码下载以及图片九宫格、鼠标悬停、滑动切换等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

2. HTML代码

<div class="content">
	<h2>jQuery图片九宫格样式鼠标悬停图片滑动切换效果(<font color="#ff0000">点击图片试试</font>)</h2>
	<div id="hs_container" class="hs_container">
		<div class="hs_area hs_area1">
			<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
			<img src="images/area1/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area2">
			<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
			<img src="images/area2/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area3">
			<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
			<img src="images/area3/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area4">
			<img class="hs_visible" src="images/area4/1.jpg" alt=""/>
			<img src="images/area4/3.jpg" alt=""/>
		</div>
		<div class="hs_area hs_area5">
			<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
			<img src="images/area5/3.jpg" alt=""/>
		</div>
	</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function(){
	//使用自定义动画
	//过渡效果
	var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
	var total_anim		= animations.length;
	//设置选择效果
	var easeType		= 'swing';
	//每个转换的速度
	var animSpeed		= 450;
	//缓存
	var $hs_container	= $('#hs_container');
	var $hs_areas		= $hs_container.find('.hs_area');
	//第一预加载的所有图像
	$hs_images          = $hs_container.find('img');
	var total_images    = $hs_images.length;
	var cnt             = 0;
	$hs_images.each(function(){
		var $this = $(this);
		$('<img/>').load(function(){
			++cnt;
			if(cnt == total_images){
				$hs_areas.each(function(){
					var $area 		= $(this);
					//当鼠标进入该区域时,我们制作动画的电流
					//图像(随机阵列动画)
					//使下一个得到可见。
					//"over" 是一个标志,如果我们可以动画 
					//一个地区或没有(我们不希望2动画
					//为每个区域在同一时间)
					$area.data('over',true).bind('mouseenter',function(){
						if($area.data('over')){
							$area.data('over',false);
							//在这方面多少图像?
							var total		= $area.children().length;
							//可见光图像
							var $current 	= $area.find('img:visible');
							//可见光图像的索引
							var idx_current = $current.index();
							//的将被显示的下一个图像。
							//无论是下一个,或第一个如果当前是最后
							var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
							//显示下一个(不可见)
							$next.show();
							//得到一个随机的动画
							var anim		= animations[Math.floor(Math.random()*total_anim)];
							switch(anim){
								//从当前幻灯片的权利
								case 'right':
								$current.animate({'left':$current.width()+'px'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','left':'0px'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从左边滑动
								case 'left':
								$current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','left':'0px'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从顶部的幻灯片
								case 'top':
								$current.animate({'top':-$current.height()+'px'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','top':'0px'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从底部滑动
								case 'bottom':
								$current.animate({'top':$current.height()+'px'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','top':'0px'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从当前幻灯片的右侧和淡出
								case 'rightFade':
								$current.animate({'left':$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从当前幻灯片的左侧和淡出
								case 'leftFade':
								$current.animate({'left':-$current.width()+'px','opacity':'0'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','left':'0px','opacity':'1'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//从当前幻灯片的顶部和淡出
								case 'topFade':
								$current.animate({'top':-$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
								//当前幻灯片,从底部淡出
								case 'bottomFade':
								$current.animate({'top':$current.height()+'px','opacity':'0'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','top':'0px','opacity':'1'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;		
								default:
								$current.animate({'left':-$current.width()+'px'},animSpeed,easeType,function(){
									$current.hide().css({'z-index':'1','left':'0px'});
									$next.css('z-index','9999');
									$area.data('over',true);
								});
								break;
							}	
						}
					});
				});
				//当点击hs_container各个领域得到滑动
				$hs_container.bind('click',function(){
					$hs_areas.trigger('mouseenter');
				});
			}
		}).attr('src',$this.attr('src'));
	});	
});
</script>

相关推荐

发表评论

相关文章