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

更新时间：2010年05月17日 23:04:48 作者：

jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码，需要的朋友可以参考下。

以下代码，运行后，需要刷新下，才能加载jquery,要不然看不到效果。
1、单行滚动效果

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

二,多行滚动效果

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

三、可控制向前向后的多行滚动

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} </style> <script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script> <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(){ $("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"}); }); </script> </head> <body> <p>多行滚动演示：</p> <div id="scrollDiv"> <ul> <li>这是公告标题的第一行</li> <li>这是公告标题的第二行</li> <li>这是公告标题的第三行</li> <li>这是公告标题的第四行</li> <li>这是公告标题的第五行</li> <li>这是公告标题的第六行</li> <li>这是公告标题的第七行</li> <li>这是公告标题的第八行</li> </ul> </div> <span id="btn1">向前</span>&nbsp;&nbsp;<span id="btn2">向后</span> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jQuery实现可以扩展的日历
这篇文章主要为大家详细介绍了jQuery实现可以扩展的日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展
2012-03-03
jQuery简单实现日历的方法
这篇文章主要介绍了jQuery简单实现日历的方法,涉及jQuery操作日期的相关技巧,比较简单实用,需要的朋友可以参考下
2015-05-05
jQuery移动端图片上传组件
这篇文章主要介绍了jQuery移动端图片上传组件，使用File API+canvas 客户端压缩图片，并实现文件上传服务端，感兴趣的小伙伴们可以参考一下
2016-06-06
EasyUI创建人员树的实例代码
最近做项目做一个树状的下拉列表，下面小编把easyUI创建人员树的实现代码分享到脚本之家平台，需要的朋友参考下吧
2017-09-09
jQuery实现平滑滚动到指定锚点的方法
这篇文章主要介绍了jQuery实现平滑滚动到指定锚点的方法,实例分析了jQuery根据锚点定位滚动的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jQuery控制DIV层实现由大到小，由远及近动画变化效果
这篇文章主要介绍了jQuery控制DIV层实现由大到小，由远及近动画变化效果,涉及jQuery基于animate方法操作页面元素实现动画渐变效果的相关技巧,需要的朋友可以参考下
2015-10-10
Bootstrap table 实现树形表格联动选中联动取消功能
这篇文章主要介绍了Bootstrap table 实现树形表格联动选中联动取消功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
jquery实现倒计时功能
这篇文章主要为大家详细介绍了jquery实现倒计时功能，详细介绍了setInterval()方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12
jQuery中click事件的定义和用法
这篇文章主要介绍了jQuery中click事件的定义和用法,以实例形式详细分析了jQuery中的click事件具体定义方法、参数及用法实例,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12