jQuery簡單的用戶評論列表文字向下滑動切換特效



116 462 155



特效描述:用戶評論 列表文字 向下滑動切換 切換特效,

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="scrollbox">
	<div class="scroll_title"><a href="http://www.dijiuzhanzhang.com/"></a></div>
	<ul class="scroll_list">
		<li>
			<a href="http://www.dijiuzhanzhang.com/"><img width="48" height="48" alt="beata娟" class="pic"  src="images/4920841.jpg" /></a>
			<span class="text">【寫給我最美好的年華】這么戳人淚點的征文題目啊,這么傷感懷舊的BGM..."放心去飛,勇敢地去追……說好了這一次不掉眼淚"...不光是這個班要畢業了... <br/><a href="http://www.dijiuzhanzhang.com/">閱讀全文&raquo;</a></span>
			<div class="from">
				<span><a href="http://www.dijiuzhanzhang.com/">網站</a></span> 來自 <a href="http://www.dijiuzhanzhang.com/">外企面試英語2月班</a>
			</div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/"><img width="48" height="48" alt="jane20110706" class="pic"  src="images/9221006.jpg" /></a>
			<span class="text">不敢相信,查了兩遍后,終于確信,我是過了四級了。不容易,考了幾次,終于過了。不過,還真的得感謝:謝老師的精采講課,水母老師和助教平常的督促哦... <br/><a href="http://www.dijiuzhanzhang.com/">閱讀全文&raquo;</a></span>
			<div class="from">
				<span><a href="http://www.dijiuzhanzhang.com/">網站</a></span> 來自 <a href="http://www.dijiuzhanzhang.com/">英語四級暑期班</a>
			</div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/"><img width="48" height="48" alt="淺jessica" class="pic"  src="images/3479036.jpg"/></a>
			<span class="text">終于在最后一天圓滿完成了我的BEC初中級課程,作為這個班的班長,我覺得我在這個班級還是收獲了很多,知識,朋友...看著147個課件后面的已學習,真的... <br/><a href="http://www.dijiuzhanzhang.com/">閱讀全文&raquo;</a></span>
			<div class="from">
				<span><a href="http://www.dijiuzhanzhang.com/">網站</a></span> 來自 <a href="http://www.dijiuzhanzhang.com/">BEC初中級6月班</a>
			</div>
		</li>
		<li>
			<a href="http://www.dijiuzhanzhang.com/"><img width="48" height="48" alt="我才是瑪奇朵" class="pic"  src="images/10140568.jpg"/></a>
			<span class="text">這一次是第一次接觸滬江,其實早就知道 但是從來沒仔細看過~有一天我去幫同學拿快遞,她報了滬江的六級班。當時袋子破掉了,我看到里面是六級的講義。... <br/><a href="http://www.dijiuzhanzhang.com/">閱讀全文&raquo;</a></span>
			<div class="from">
				<span><a href="http://www.dijiuzhanzhang.com/">網站</a></span> 來自 <a href="http://www.dijiuzhanzhang.com/">英語四級沖關班</a>
			</div>
		</li>
	</ul>
</div>
<script type="text/javascript">
$(function(){        
	setInterval(function(){
		$('.scrollbox ul li:last').hide().insertBefore($(".scrollbox ul li:first")).slideDown(1000);
	}, 6000);
});
</script>



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


熱門標簽: 文字疊加 文字層疊 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 滾動切換 滾動條切換 文字拖動 文字拖拽 滑動選項卡 滑動切換 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字切換 文字選項卡 文字滾動 文字無縫滾動 文字間歇滾動 文字滑動 文字滑塊 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 圖片文字 文字導航菜單 文字導航 文字菜單 文字 文字插件 文字滑動 文字滑塊 文字列表 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子