一个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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
浅谈JavaScript字符集
May 22 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jquery中trigger()无法触发hover事件的解决方法
May 07 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
js实现导航跟随效果
Nov 17 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php实现rc4加密算法代码
2012/04/25 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
Vue.js实现无限加载与分页功能开发
2016/11/03 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
如何正确理解vue中的key详解
2019/11/02 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
python实现BackPropagation算法
2017/12/14 Python
python实现微信自动回复功能
2018/04/11 Python
python 字典操作提取key,value的方法
2019/06/26 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
淘宝网店营销策划书
2014/01/11 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
go开发alertmanger实现钉钉报警
2021/07/16 Golang
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android