jQuery鼠标悬停横向手风琴切换代码



169 674 225



特效描述:jQuery鼠标悬停 横向手风琴切换,jQuery鼠标悬停横向手风琴切换代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>

2. HTML代码

<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://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 滑动星星打分 收缩展开 其他 鼠标悬停 图片切换 图片收缩展开 手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到