jQuery hover仿阿里媽媽網站首頁水平滑動門切換代碼



124 495 166



特效描述:網站首頁 水平滑動門 滑動門切換,這是一個仿照阿里媽媽來的一個帶有圖片和文字的切換,很有特點

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 引入JS

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

3. HTML代碼

<div id="probox">
	<ul id="pro">
		<li id="li01" class="lishow">
			<div class="inner">
				<span class="tjlm">淘寶聯盟</span>
				<div class="grp">
					<h4>淘寶聯盟</h4>
					<p>提供2億淘寶商品庫,頻道/搜索/組件/活動等多種推廣方式選擇,靈活的API接口支持,與網站內容完美結合的推廣方式。百萬成功合作案例,30億分成規模.</p>
				</div>
			</div>
		</li>
		<li id="li02">
			<div class="inner">
				<span class="cctg">櫥窗推廣</span>
				<div class="grp">
					<h4>tanx SSP 櫥窗推廣</h4>
					<p>提供2億淘寶商品庫,頻道/搜索/組件/活動等多種推廣方式選擇,靈活的API接口支持,與網站內容完美結合的推廣方式。百萬成功合作案例,30億分成規模.</p>
				</div>
			</div>
		</li>
		<li id="li03">
			<div class="inner">
				<span class="wxlm">無線聯盟</span>
				<div class="grp">
					<h4>無線聯盟</h4>
					<p>提供2億淘寶商品庫,頻道/搜索/組件/活動等多種推廣方式選擇,靈活的API接口支持,與網站內容完美結合的推廣方式。百萬成功合作案例,30億分成規模.</p>
				</div>
			</div>
		</li>
	</ul>
	<div id="new">
		<span class="new">新產品</span>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#li01').hover(function(){
		$(this).animate({'left':'0'},300).addClass('lishow');
		$('#li02').animate({'left':'560px'},300).removeClass('lishow');
		$('#li03').animate({'left':'715px'},300).removeClass('lishow');
	});
	$('#li02').hover(function(){
		$(this).animate({'left':'145px'},300).addClass('lishow');
		$('#li01').animate({'left':'0'},300).removeClass('lishow');
		$('#li03').animate({'left':'715px'},300).removeClass('lishow');
	});
	$('#li03').hover(function(){
		$('#li02').animate({'left':'145px'},300).removeClass('lishow');
		$(this).animate({'left':'290px'},300).addClass('lishow');
	});
});
</script>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 滑動選項卡 滑動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子