jQuery用上下控制按钮实现简单的多行滚动效果代码

本文中，一个例子讲述了jQuery简单的多行滚动效果代码，带有上下控制按钮。分享给大家参考。具体如下：

这里用jQuery插件实现最简单的多行文字滚动效果。它还有上下滚动控制按钮。滚动速度较慢(毫秒)，滚动时间间隔为(毫秒)，每次滚动的行数默认为一屏，即父容器的高度.

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/jquery-上-下-滚动-src-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题用jQuery实现最简单的滚屏效果，加了上下按钮/titlestyle type='text/css'ul，Li { margin :0 padd :0 } # scroll div { width :300 px；高度：100 px最小高度：25 px线高：25 pxborder:#ccc 1px固体；溢出：隐藏} # scrollDiv Li {高度：25 px填充-左侧：10 px}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。6 .2 .量滴js '/script脚本类型=' text/JavaScript '(函数($){ $)。fn。extend({ scroll :函数(opt，callback){ //参数初始化if(！opt)var opt={ }；var _ btnUp=$(' # ' opt。向上)；//肖菲：向上按钮var _ BTN向下=$(' # '选择。向下)；//肖菲：向下按钮var timerIDvar _this=this.eq(0).find(' ul : first ')；var LineH=_ this。查找('李：第一').高度(),//获取行高line=opt.line？parseInt(opt.line，10): parseInt(这个。高度()/lineH，10)，//每次滚动的行数，默认为一屏，即父容器高度速度=选择。速度？parsent(opt。速度，10):500；//卷动速度，数值越大，速度越慢（毫秒)timer=opt.timer /？parsent(opt . timer，10):3000；//滚动的时间间隔（毫秒)if(line==0)line=1；var upht=0-line * LineH；//滚动函数var scrolup=function(){ _ btnup。解除绑定(' click '，scrolup)；//肖菲：取消向上按钮的函数绑定_这个。动画({页边距到p : uph8 }，速度，函数(){ for(I=1；I=线；i ){ _this.find('li:first ').appendo(_ this)；} _这个。CSS({ marginto p :0 })；_btnUp.bind('click '，scrollUp)；//肖菲：绑定向上按钮的点击事件});}//肖菲：向下翻页函数var向下滚动=function(){ _ btndown。解除绑定(“点击”，向下滚动)；for(I=1；I=线；i ){ _this.find('li:last ').显示()。前置到(_ this)；} _这个。CSS({页边距到p : upther })；_这个。动画({ marginto p :0 }，速度，函数(){ _btnDown.bind('点击'，向下滚动)；});}//肖菲：自动播放var autoPlay=function(){ if(timer)timerID=window。setinterval(scrolup，timer)；};var autoStop=function(){ if(timer)窗口。clear interval(TiMerid)；};//鼠标事件绑定_this.hover(自动停止，自动播放)。鼠标移出()；_btnUp.css('光标','指针')。单击（滚动)。悬停（自动停止、自动播放);//肖菲：向上向下鼠标事件绑定_btnDown.css('光标','指针')。单击（向下滚动)。悬停（自动停止、自动播放);} })})(jQuery)；$(文档)。ready(function(){ $('#scrollDiv ')).滚动({line:4，speed:500，timer:3000，up:'btn1 '，down : ' BTN 2 ' })；});/脚本/标题dyp多行滚动演示：/pdiv id=' scroll div ' ullia href=' target=' _ blank '信言企业公司建站程序v1/a/lilia href=' target=' _ blank ' epffms环保时代动态服务器页面家庭财务管理系统v 5.0/a/lilia href=' target=' _ blank ' jquery两幅图像动画叠加的效果/a/lilia href=' target=' _ blank ' Android滑动提示、菜单及列表等小程序源码/a/lilia href=' target=' _ blank ' MaxCms马克斯电影视频系统v 4.0/a/lilia dedecms v 5.7 UTF-8/a/lilia站点流量统计系统v1.2.1/a/li/ul/divspan id='btn2 '向上/spanspan id='btn1 '向下/span/body/html希望本文所述对大家的jquery程序设计有所帮助。