一个jquery实现的不错的多行文字图片滚动效果


Posted in Javascript onSeptember 28, 2014

今儿分享一个jquery实现多行滚动效果。

我看一些论坛网站上面,公告处用的较多。

代码如下

// 多行滚动
(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):1000, //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i

实例演示

代码如下

<div id="scrollDiv">
<ul>
<li>我是jquery多行滚动条一</li>
<li>我是jquery多行滚动条二</li>
<li>我是jquery多行滚动条三</li>
<li>我是jquery多行滚动条四</li>
<li>我是jquery多行滚动条五</li>
<li>我是jquery多行滚动条六</li>
<li>我是jquery多行滚动条七</li>
<li>我是jquery多行滚动条八</li>
</ul>
</div>
<script type="text/javascript" src="http:/(3water.com)/ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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):1000, //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔(毫秒)
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(){
$("#scrollDiv").Scroll({line:4,speed:1000,timer:2000});
});
</script>
Javascript 相关文章推荐
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 #Javascript
js propertychange和oninput事件
Sep 28 #Javascript
javascript检测是否联网的实现代码
Sep 28 #Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 #Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 #Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 #Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 #Javascript
You might like
融入意大利的咖啡文化
2021/03/03 咖啡文化
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python实现简单坦克大战
2020/03/27 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
教师年终个人自我评价
2013/10/04 职场文书
党员公开承诺书范文
2014/03/25 职场文书
安全演讲稿大全
2014/05/09 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
小学学习委员竞选稿
2015/11/20 职场文书