jquery实现文字上下滚动_文本链接

jquery实现文字上下滚动: 发布时间：2019-11-27编辑：脚本学堂

jquery实现文字上下滚动，单行、批量多行滚动，文字图片上下翻滚。支持文字单行滚动、文字多行滚动、图片单行滚动、图片多行滚动、带按钮控制图片或文字滚动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <title>单行滚动 多行滚动 带按钮控制滚动 <a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a> 图片文字滚动特效</title>
    <style>
    *{margin:0;padding:0;list-style-type:none;}
    a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
    :focus{outline:0;}
    label{cursor:pointer;}
    img{vertical-align:middle;}
    table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
    h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}
    abbr,acronym{border:0;font-variant:normal}
    address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
    input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
    input,button,textarea,select{*font-size:100%}
    a,img{border:0;}
    a,a:visited{color:#5e5e5e; text-decoration:none;}
    a:hover{color:#4183C4;text-decoration:underline;}
    .clear{display:block;overflow:hidden;clear:both;height:0;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:0;font-size:0;}
    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
    .clearfix{display:inline-table;}/* Hides from IE-mac */
    *html .clearfix{height:1%;}
    .clearfix{display:block;}/* End hide from IE-mac */
    *+html .clearfix{min-height:1%;}
    body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
    /* shortcut */
    .shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
    *html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
    *html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
    .shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
    .shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
    .shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
    .shortcut a:hover{background:#fff;}
    .shortcut span.right{float:right;}
    .shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
    .headeline{height:40px;overflow:hidden;}
    .adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
    </style>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/jquery1.3.2.js"></script>
    </head>
    <body>
    <div class="shortcut">
    <h1><a href="#" _fcksavedurl="#">单行滚动 多行滚动 带按钮控制滚动 jquery 图片文字滚动特效</a></h1>
    <span class="right">
    <a href="#" _fcksavedurl="#">
    <strong>下载特效</strong>
    </a>
    </span>
    <div class="clr"></div>
    </div>
    <div class="headeline"></div>
    
    <p><style type="text/css">
    *{margin:0;padding:0;}
    ul,li{list-style-type:none;}
    body{font:12px/180% Arial, Helvetica, sans-serif;}
    a{color:#333;text-decoration:none;}
    a:hover{color:#3366cc;text-decoration:underline;}
    .demopage{width:960px;margin:0 auto;}
    .demopage h2{font-size:14px;margin:20px 0;}
    /* scrollDiv */
    .scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc 1px solid;overflow:hidden;/* 必要元素 */}
    .scrollDiv li{height:25px;padding-left:10px;}
    #s2,#s3{height:100px;}
    </style></p>
    <div class="demopage">
    <h2>jquery 文字上下滚动 单行滚动
    </h2>
    <div id="s1" class="scrollDiv">
    <ul>
    <li><a href="#" _fcksavedurl="#">jquery <a href=http://www.jb200.com/zt/gundongtiao/ target=_blank class=infotextkey>滚动条</a> Scrollbar 设置浏览器默认<a href=http://www.jb200.com/zt/gundongtiaoyangshi/ target=_blank class=infotextkey>滚动条样式</a></a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片切换 switchable 带左右按钮控制<a href=http://www.jb200.com/zt/fenye/ target=_blank class=infotextkey>分页</a>索引图片切换</a></li>
    <li><a href="#" _fcksavedurl="#">jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、<a href=http://www.jb200.com/zt/biaodan/ target=_blank class=infotextkey>表单</a>验证等</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 表单美化 jquery tz<a href=http://www.jb200.com/zt/checkbox/ target=_blank class=infotextkey>checkbox</a> <a href=http://www.jb200.com/zt/fuxuankuang/ target=_blank class=infotextkey>复选框</a>美化 自定义默认复选框</a></li>
    <li><a href="#" _fcksavedurl="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片<a href=http://www.jb200.com/zt/fangdajingtexiao/ target=_blank class=infotextkey>放大镜</a> 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放</a></li>
    </ul>
    </div>
     	<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 id="s2" class="scrollDiv">
    <ul>
    <li><a href="#" _fcksavedurl="#">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
    <li><a href="#" _fcksavedurl="#">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
    <li><a href="#" _fcksavedurl="#">jquery轻量级进度条 progressbar 带动画显示的进度过程的<a href=http://www.jb200.com/jquery/jindutiao/ target=_blank class=infotextkey>jquery进度条</a>特效</a></li>
    <li><a href="#" _fcksavedurl="#">jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
    <li><a href="#" _fcksavedurl="#">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
    <li><a href="#" _fcksavedurl="#">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; //滚动的<a href=http://www.jb200.com/zt/shijianjiange/ target=_blank class=infotextkey>时间间隔</a>（毫秒）
					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 id="s3" class="scrollDiv">
    <ul>
    <li><a href="#" _fcksavedurl="#">jquery colorpicker 插件颜色选择器 点击颜色选择<a href=http://www.jb200.com/zt/yansezhi/ target=_blank class=infotextkey>颜色值</a>与颜色相应变化</a></li>
    <li><a href="#" _fcksavedurl="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
    <li><a href="#" _fcksavedurl="#">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
    <li><a href="#" _fcksavedurl="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
    <li><a href="#" _fcksavedurl="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
    <li><a href="#" _fcksavedurl="#">jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换</a></li>
    </ul>
    </div>
    <span id="btn1">点击向上滚动</span>  <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:<a href=http://www.jb200.com/zt/zidongbofang/ target=_blank class=infotextkey>自动播放</a>
					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>
    
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：使用jQuery插件来实现的多行文字滚屏效果
下一篇：用javscript实现逐行文本滚动效果

与 jquery实现文字上下滚动有关的文章

本文标题：jquery实现文字上下滚动
本页链接：http://www.jb200.com/tx/142.html

浏览排行

栏目分类

热点文章

jquery实现文字上下滚动