jQuery鼠標懸停橫向手風琴切換代碼



130 517 173



特效描述: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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 收縮展開 展開收縮 收縮 展開 其他 鼠標懸停 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表