<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 文字滚动大全 单行滚动 多行滚动 带按钮控制滚动</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

css样式
<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>
</head>

<body>

第一种：文字单行上下滚动
<div class="demopage">
<h2>jquery 文字上下滚动--单行 批量多行 文字图片上下翻滚 | 单行滚动</h2>
<div class="scrollDiv" id="s1">
<ul>
<li><a href="#">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
<li><a href="#">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
<li><a href="#">jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等</a></li>
<li><a href="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
<li><a href="#">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
<li><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><a href="#">jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
<li><a href="#">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="#">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
<li><a href="#">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
<li><a href="#">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
<li><a href="#">jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</a></li>
<li><a href="#">jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
<li><a href="#">jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
<li><a href="#">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
<li><a href="#">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="#">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
<li><a href="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
<li><a href="#">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
<li><a href="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
<li><a href="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
<li><a href="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><a href="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
<li><a href="#">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-->
</body>
</html>

jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动的更多相关文章

  1. Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】

    原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注：如果和左右滚动一起使用，则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...

  2. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  3. CSS实现单行与多行文字省略（truncation）

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  4. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  5. 单行文字溢出和多行文字溢出省略号显示的CSS样式

    单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis ...

  6. CSS 实现单行及多行文字省略

    单行文字省略 很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了 .dom{ text-overflow: ellipsis; overflow: hidden; ...

  7. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

  8. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  9. 多行文字垂直居中（完美兼容chrome firefox IE6 7 8 9）

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. 根据url的属性名来取属性值赋值给js

    1.方法一:js的正则表达式:请求路径:http://127.0.0.1/pec/jsp/member/refundOrder.jsp?status=4 <script> var stat ...

  2. 大数据处理也要安全--关于MaxCompute的安全科普

    [TOC] 1.企业大数据处理现状 当今社会数据收集手段不断丰富,行业数据大量积累,数据规模已增长到了传统软件行业无法承载的海量数据(百GB.TB乃至PB)级别.基于此,阿里云推出有了一套快速.完全托 ...

  3. day26 作业

    目录 TCP三次握手.四次挥手图 三次握手 四次挥手 简明理解三次握手 基于TCP开发一款远程CMD程序 TCP三次握手.四次挥手图 三次握手 第一次握手:客户端给服务端发一个 SYN 报文,并指明客 ...

  4. css的层叠性+继承性+优先级+权重

    一.层叠性 1.含义 多种css样式叠加,浏览器处理冲突的能力. 2.原则 1>一般情况下,若出现冲突,会按照css的书写顺序,以最后的样式为准 2>样式不冲突,就不会层叠 二.css的继 ...

  5. git 命令行（一）-版本回退

    1. 版本回退 在实际工作中,我们脑子里怎么可能记得一个几千行的文件每次都改了什么内容,不然要版本控制系统干什么.版本控制系统肯定有某个命令可以告诉我们历史记录,在Git中,我们用 git log 命 ...

  6. Thinkphp 加载更多

    要实现的效果是这样的: 每次点击显示更多按钮,都会往下显示2条数据,直到后面没有数据了.. 数据表: articleList模板文件 <include file="./Applicat ...

  7. JMETER远程运行_多机联合负载

    JMETER远程运行_多机联合负载 远程运行是用一台JMeter控制机控制远程的多台机器来产生负载.控制机与负载机之间通过RMI方式来完成通信.在负载机上运行Agent程序(启动命令是%JMETER_ ...

  8. TCP、UDP区别

    个人认为,用户层Socket的TCP和UDP编程,区别并不大.   最大的区别,或者说,唯一的区别,似乎就是TCP客户端中断连接之后,TCP会得到一个应答.   但是如果用UDP来实现TCP,似乎也不 ...

  9. GitBook的使用方法

    ---恢复内容开始--- 由于近期工作中使用gitbook编写讲义,现把出现的问题总结下: 1 . gitbook的安装 Gitbook与word等办公软件类似,能够编写文档,Gitbook中编写文档 ...

  10. Java review-basic5

    1. How would you write a socket client/server in Java The server DateServer.java package edu.lmu.cs. ...