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 相关文章推荐
多引号嵌套的变量命名的问题
May 09 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
Aug 27 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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下对字符串的递增运算代码
2010/08/21 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JavaScript之数组(Array)详解
2015/04/01 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
分享Python开发中要注意的十个小贴士
2016/08/30 Python
pandas 选择某几列的方法
2018/07/03 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
详解python中递归函数
2019/04/16 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
手术室护士自我鉴定
2013/10/14 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
电视节目策划方案
2014/05/16 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
详解Python常用的魔法方法
2021/06/03 Python
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技