jquery仿京東商城首頁底部文字評論列表向下滑動切換效果



179 712 238



特效描述:首頁底部 文字評論列表 向下滑動切換,

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div id="club">
	<div class="modle" id="modle_left">
		<h2 class="modle_title"><span>熱門曬單</span></h2>
		<div class="modle_con">
			<ul>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho3.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="modle modle_right" id="modle_right">
		<h2 class="modle_title"><span>熱門曬單</span></h2>
		<div class="modle_con">
			<ul>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho3.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho1.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
				<li class="fn-clear">
					<div class="modle_img fn-left"><a href="###"><img src="image/ho2.jpg"></a><i></i></div>
					<div class="modle_text fn-right">
						<p><a href="###">很不錯的一款電熱壺喲</a></p>
						<div><a href="">速度很快。信號很好,而且設置方便。最關鍵的是,能看到流量使用了多</a></div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div><!--club end-->



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片滑動 圖片滑塊 文字滑動 文字滑塊 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子