<!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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery鼠标悬停横向大图展示特效.zip
版权申诉
148 浏览量
2022-11-22
17:15:20
上传
评论
收藏 499KB ZIP 举报
jQuery鼠标悬停横向大图展示特效.zip （13个子文件） 
jQuery鼠标悬停横向大图展示特效 
jQuery鼠标悬停横向大图展示特效.jpg 65KB jiaoben4427 images hd_bg.jpg 14KB big_04.jpg 66KB big_00.jpg 43KB img_04.jpg 27KB img_03.jpg 27KB img_01.jpg 22KB img_02.jpg 17KB big_03.jpg 78KB big_01.jpg 71KB big_02.jpg 59KB
index.html 5KB js 
jquery.js 83KB资源评论
