一个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 相关文章推荐
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 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
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
php 伪静态之IIS篇
2014/06/02 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
python二分法实现实例
2013/11/21 Python
python删除列表内容
2015/08/04 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Python和Go语言的区别总结
2019/02/20 Python
python实现图片转字符小工具
2019/04/30 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
房屋租赁意向书
2014/04/01 职场文书
小学生读书活动总结
2014/06/30 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
单位法人授权委托书范本
2014/10/09 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
房贷收入证明范本
2015/06/12 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript