一个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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
js创建数组的简单方法
Jul 27 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PDO::getAttribute讲解
2019/01/28 PHP
跟我学习javascript的执行上下文
2015/11/18 Javascript
js实现图片轮播效果
2015/12/19 Javascript
ES6的新特性概览
2016/03/10 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
实例讲解React 组件
2020/07/07 Javascript
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
Python中单、双下划线的区别总结
2017/12/01 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
python中安装django模块的方法
2020/03/12 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
村优秀党员事迹材料
2014/01/15 职场文书
2014信息公开实施方案
2014/02/22 职场文书
高考励志标语
2014/06/05 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
应聘护士求职信
2014/07/21 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
原生JS封装vue Tab切换效果
2021/04/28 Vue.js