jQuery鼠标悬停横向大图展示特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标悬停横向大图展示特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停横向大图展示特效</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a, img{border:0;}
body{font:12px/180% "微软雅黑", Arial, Helvetica, sans-serif;}

.film_focus{width:1170px;height:486px;overflow:hidden;position:relative; margin:0 auto;}
.film_focus ul.film_focus_imgs{height:486px;height:9999em;position:absolute;right:0;top:0;overflow:hidden;}
.film_focus ul.film_focus_imgs li{height:486px;overflow:hidden;}
.film_focus ul.film_focus_imgs li img{height:486px;}
.film_focus .film_focus_desc h3{height:45px;line-height:45px;overflow:hidden;position:absolute;left:486px;bottom:0;width:100%;padding-left:20px;z-index:99;}
.film_focus ul.film_focus_nav{height:486px;position:absolute;left:0;top:0;z-index:100;}
.film_focus ul.film_focus_nav li{height:486px;margin:0px 2px 0px 0;position:relative;cursor: pointer;cursor: hand;overflow:hidden;float:left}
.film_focus ul.film_focus_nav li.cur{height:486px;word-break:break-all;font-weight:bold;font-size:22px;overflow:hidden;line-height:30px;}
.film_focus ul.film_focus_nav li b{display:none}
.film_focus ul.film_focus_nav li b span{display:block}
.film_focus ul.film_focus_nav li.cur b{display:block;height:486px;}
.film_focus ul.film_focus_nav li.cur span{display:none}
</style>


<div style="background:url(images/hd_bg.jpg) no-repeat top center; width:100%">
<div class="film_focus">
	<div class="film_focus_desc">
		<ul class="film_focus_nav">
			<li><b><img src="images/img_01.jpg" /><img src="images/big_01.jpg" /></b><span><img src="images/img_01.jpg" /></span></li>
			<li><b><img src="images/img_02.jpg" /><img src="images/big_02.jpg" /></b><span><img src="images/img_02.jpg" /></span> </li>
			<li><b><img src="images/img_03.jpg" /><img src="images/big_03.jpg" /></b><span><img src="images/img_03.jpg" /></span> </li>
			<li><b><img src="images/img_04.jpg" /><img src="images/big_04.jpg" /></b><span><img src="images/img_04.jpg" /></span> </li>
            <li><img src="images/big_00.jpg" /></li>
		</ul>
	</div>
	
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript">
(function(A){
	A.fn.th_video_focus=function(E){
		
		var G={
			actClass:"cur",
			animTime:600,
			delayTime:5000
		};
		
		if(E){
			A.extend(G,E)
		}
		
		var C=G.actClass, D=G.navContainerClass, B=G.focusContainerClass, F=G.animTime, H=G.delayTime, I=null;
		
		return this.each(function(){
			
			var O=A(this), M=A(D+" li",O), P=A(B+" li",O), L=M.length, K=O.height();
			
			function N(R){
				var V=K*R*-1;
				var U=A(B+" li",O), W=null, T=null;
				for(var S=0;S<=R;S++){
					W=U.eq(S);
					T=W.find('script[type="text/templ"]');
					if(T.length>0){
						W.html(T.html())
					}
				}
				A(B,O).stop().animate({top:V},F,function(){
					var Y=O.find("h3"), X=Y.height();
					Y.height(0).html(A(B+" li").eq(R).find("img").attr("alt")).animate({height:X},600)
				});
				A(D+" li").eq(R).addClass(C).siblings().removeClass(C)
			}
			
			function Q(){
				if(I){
					clearInterval(I)
				}
				I=setInterval(function(){
					var R=A(D+" li."+C).index();
					N((R+1)%L)
				},H)
			}
			
			O.hover(function(){
				if(I){
					clearInterval(I)
				}
			},function(){
				Q()
			});
		
			var J=null;
			
			M.hover(function(){
				
				var R=A(this).index();
				
				if(I){
					clearInterval(I)
				}
				J=setTimeout(function(){
					N(R)
				},300)
			},function(){
				if(J){
					clearTimeout(J)
				}
				Q()
			}).click(function(T){
				var R=A(this).index(), S=P.eq(R).find("a");
				if(document.uniqueID||window.opera){
					S[0].click();
					T.stopPropagation();
					T.preventDefault()
				}
			});
			
			Q()
			
		})
	}
	
})(jQuery);

$(function(){
	
	
	$(".film_focus").th_video_focus({
		navContainerClass:".film_focus_nav",
		focusContainerClass:".film_focus_imgs",
		delayTime:2000
	});
	
});	
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)