jquery实现多行文字图片滚动效果示例代码


Posted in Javascript onOctober 10, 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 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
一个js过滤空格的小函数
Oct 10 #Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 #Javascript
window.location 对象所包含的属性
Oct 10 #Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 #Javascript
JavaScript设计模式之外观模式实例
Oct 10 #Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 #Javascript
JavaScript设计模式之策略模式实例
Oct 10 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
PHP安全配置
2006/12/06 PHP
PHP 面向对象详解
2012/09/13 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python入门篇之函数
2014/10/20 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python numpy 常用函数总结
2017/12/07 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
python输出带颜色字体实例方法
2019/09/01 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
const和static readonly区别
2013/05/20 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
服务承诺口号
2014/05/22 职场文书
物理系毕业生自荐书
2014/06/13 职场文书