jQuery文字滾動上下間歇滾動效果



61 243 82



特效描述:jQuery文字滾動 上下間歇滾動,jQuery文字滾動上下間歇滾動效果

代碼結構

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.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,Lucida,Verdana,"宋體",Helvetica,sans-serif;color:#333;background:#fff;}
.scrolltext{width:230px;height:287px;overflow:hidden;background:url(images/123aafa.png) no-repeat;}
/* quotation */
#quotation{width:190px;height:227px;overflow:hidden;margin:44px auto 0 auto;}
#quotation li{line-height:28px;padding-bottom:35px;}
#quotation li .a-r{text-align:right;}
#quotation li span{color:#999;margin:0 0 0 10px;}
</style>
<div class="scrolltext">
	<div id="quotation">
		<ul>
			<li>
				<p>jquery圖片大小尺寸調整插件,自適應容器圖片垂直居中,自定義圖片大小尺寸寬度和高度...</p>
				<p class="a-r"><a href="http://http://www.cqetom.live/" class="stress">jquery文字滾動</a><span>2012-07-10</span></p>
			</li>
			<li>
				<p>jquery jCoverflip圖片插件制作圖片水平滑動展示,依次放大縮小圖片縮放翻轉展...</p>
				<p class="a-r"><a href="http://http://www.cqetom.live/" class="stress">jquery文字滾動</a><span>2012-07-09</span></p>
			</li>
			<li>
				<p>jquery圖片插件制作圖片等比列縮放層疊樣式,圖片疊加展示。點擊層疊最上層...</p>
				<p class="a-r"><a href="http://http://www.cqetom.live/" class="stress">jquery文字滾動</a><span>2012-07-10</span></p>
			</li>
			<li>
				<p>jquery圖片放大插件制作一個當鼠標滑過圖片,圖片按等比例縮放放大效果...</p>
				<p class="a-r"><a href="http://http://www.cqetom.live/" class="stress">jquery文字滾動</a><span>2012-07-09</span></p>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
$(function(){
	var scrtime;
	$("#quotation").hover(function(){
		clearInterval(scrtime);
	},function(){
	scrtime = setInterval(function(){
		var $ul = $("#quotation ul");
		var liHeight = $ul.find("li:last").height();
		$ul.animate({marginTop : liHeight + 35 + "px"},1000,function(){
		$ul.find("li:last").prependTo($ul)
		$ul.find("li:first").hide();
		$ul.css({marginTop:0});
		$ul.find("li:first").fadeIn(1000);
		});
	},4000);
	}).trigger("mouseleave");
});
</script>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 文字滾動 文字無縫滾動 文字間歇滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子