一个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游戏之是男人就下100层代码打包
Nov 08 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Angular2 环境配置详细介绍
Sep 21 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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实现CSV文件的导入和导出类
2015/03/24 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
vuex实现简易计数器
2016/10/27 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python装饰器用法实例总结
2018/05/26 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
英国女士家居服网站:hush
2017/08/09 全球购物
应用电子专业学生的自我评价
2013/10/16 职场文书
静心口服夜广告词
2014/03/20 职场文书
免职通知
2015/04/23 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
vue引入Excel表格插件的方法
2021/04/28 Vue.js
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python