jquery 文字滾動大全 scroll 支持文字或圖片 單行滾動 多行滾動 帶按鈕控制滾動



96 381 128



特效描述:文字滾動大全 文字圖片單行滾動 多行滾動 帶按鈕控制滾動,jquery 文字滾動插件 scroll 支持文字單行滾動、文字多行滾動、圖片單行滾動、圖片多行滾動、且可以帶按鈕控制圖片或文字滾動,是圖片與文字滾動特效非常常用的一個jquery 特效。

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="demopage">
	<h2>jquery 文字上下滾動--單行 批量多行 文字圖片上下翻滾 | 單行滾動</h2>
	<div class="scrollDiv" id="s1">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 滾動條 Scrollbar 設置瀏覽器默認滾動條樣式</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片切換 switchable 帶左右按鈕控制分頁索引圖片切換</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery powerFloat萬能浮動框提示插件 支持圖片、文字、ajax異步加載、表單驗證等</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 彈出層插件 ThickBox 多功能彈出層插件支持圖片、ajax、內嵌內容彈等</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 表單美化 jquery tzCheckbox 復選框美化 自定義默認復選框</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery HTML5 幻燈片插件 用 Canvas 制作類似百葉窗拍攝快門攝影拍攝效果</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片放大鏡 圖片類似放大鏡效果鼠標滑過小圖異步加載中圖、大圖</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片幻燈片 點擊小圖顯示大圖異步加載 支持按鈕播放</a></li>
		</ul>
	</div><!--scrollDiv end-->
	<script type="text/javascript">
	function AutoScroll(obj){
		$(obj).find("ul:first").animate({
			marginTop:"-25px"
		},500,function(){
			$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
		});
	}
	$(document).ready(function(){
		setInterval('AutoScroll("#s1")',3000);
	});
	</script>
	<h2>jquery 文字上下滾動--單行 批量多行 文字圖片上下翻滾 | 多行滾動</h2>
	<div class="scrollDiv" id="s2">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery Xslider 插件焦點圖片特效圖片淡隱淡現、圖片上下滾動、圖片左右滾動、選項卡</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 文字連續滾動 節奏感十足的齒輪式滾動圖片展示與文字內容特效展示</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery cycle 循環幻燈片插件多功能幻燈片插件支持多種幻燈片特效</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery輕量級進度條 progressbar 帶動畫顯示的進度過程的jquery進度條特效</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery菜單特效 鼠標滑過菜單區域圖標和文本類似flash動畫酷炫移動展示</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片切換 自動切換顯示隱藏show/hide帶左右按鈕與分頁索引按鈕控制圖片自動切換顯示隱藏show/hide</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery圖片特效 slide banner焦點圖片切換圖片上下翻滾、圖片左右翻滾、圖片淡隱淡現3種圖片滾動特效</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">javascript jscolor colorpicker js顏色選擇器插件10多種調用顏色方法與取值</a></li>
		</ul>
	</div>
	<script type="text/javascript">
	//滾動插件
	(function($){
		$.fn.extend({
			Scroll:function(opt,callback){
					//參數初始化
					if(!opt) var opt={};
					var _this=this.eq(0).find("ul:first");
					var lineH=_this.find("li:first").height(), //獲取行高
						line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數,默認為一屏,即父容器高度
						speed=opt.speed?parseInt(opt.speed,10):500, //卷動速度,數值越大,速度越慢(毫秒)
						timer=opt.timer?parseInt(opt.timer,10):3000; //滾動的時間間隔(毫秒)
					if(line==0) line=1;
					var upHeight=0-line*lineH;
					//滾動函數
					scrollUp=function(){
							_this.animate({
									marginTop:upHeight
							},speed,function(){
									for(i=1;i<=line;i++){
											_this.find("li:first").appendTo(_this);
									}
									_this.css({marginTop:0});
							});
					}
					//鼠標事件綁定
					_this.hover(function(){
							clearInterval(timerID);
					},function(){
							timerID=setInterval("scrollUp()",timer);
					}).mouseout();
			}       
		});
	})(jQuery);
	$(document).ready(function(){
		$("#s2").Scroll({line:4,speed:500,timer:4000});
	});
	</script>
	<h2>jquery 上下滾動--單行 批量多行 文字圖片上下翻滾 | 可控制向前向后的多行滾動</h2>
	<div class="scrollDiv" id="s3">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery colorpicker 插件顏色選擇器 點擊顏色選擇顏色值與顏色相應變化</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery評論星星打分特效、鼠標滑過星星顯示評論信息</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery圖片切換滾動 水平手風琴切換滾動鼠標滑過圖片水平切換</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片切換滾動特效帶分頁索引按鈕控制左右圖片切換滾動</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery篩選器插件選項卡 css3制作一個漂亮的HTML5篩選容器插件選項卡</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片特效用CSS3和HTML5制作仿動畫頭條報紙縮小到放大翻轉圖片展示</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery特效基于jquery幻燈片插件制作一個泡沫幻燈片圖片展示特效</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/">jquery 圖片幻燈片仿IBM首頁焦點圖切換,類似flash動態效果圖片切換</a></li>
		</ul>
	</div>
	<span id="btn1" >點擊向上滾動</span>&nbsp;&nbsp;<span id="btn2">點擊向下滾動</span>
	<script type="text/javascript">
	(function($){
		$.fn.extend({
			Scroll:function(opt,callback){
					//參數初始化
					if(!opt) var opt={};
					var _btnUp = $("#"+ opt.up);//Shawphy:向上按鈕
					var _btnDown = $("#"+ opt.down);//Shawphy:向下按鈕
					var timerID;
					var _this=this.eq(0).find("ul:first");
					var     lineH=_this.find("li:first").height(), //獲取行高
							line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數,默認為一屏,即父容器高度
							speed=opt.speed?parseInt(opt.speed,10):500; //卷動速度,數值越大,速度越慢(毫秒)
							timer=opt.timer //?parseInt(opt.timer,10):3000; //滾動的時間間隔(毫秒)
					if(line==0) line=1;
					var upHeight=0-line*lineH;
					//滾動函數
					var scrollUp=function(){
							_btnUp.unbind("click",scrollUp); //Shawphy:取消向上按鈕的函數綁定
							_this.animate({
									marginTop:upHeight
							},speed,function(){
									for(i=1;i<=line;i++){
											_this.find("li:first").appendTo(_this);
									}
									_this.css({marginTop:0});
									_btnUp.bind("click",scrollUp); //Shawphy:綁定向上按鈕的點擊事件
							});
					}
					//Shawphy:向下翻頁函數
					var scrollDown=function(){
							_btnDown.unbind("click",scrollDown);
							for(i=1;i<=line;i++){
									_this.find("li:last").show().prependTo(_this);
							}
							_this.css({marginTop:upHeight});
							_this.animate({
									marginTop:0
							},speed,function(){
									_btnDown.bind("click",scrollDown);
							});
					}
				   //Shawphy:自動播放
					var autoPlay = function(){
							if(timer)timerID = window.setInterval(scrollUp,timer);
					};
					var autoStop = function(){
							if(timer)window.clearInterval(timerID);
					};
					 //鼠標事件綁定
					_this.hover(autoStop,autoPlay).mouseout();
					_btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠標事件綁定
					_btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
			}      
		})
	})(jQuery);
	$(document).ready(function(){
		$("#s3").Scroll({line:4,speed:500,timer:2000,up:"btn1",down:"btn2"});
	});
	</script>
</div><!--demopage end-->	



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


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子