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整除实现代码
Nov 23 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 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个人网站架设连环讲(一)
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
php下获取http状态的实现代码
2014/05/09 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
jQuery实现本地存储
2020/12/22 jQuery
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
用Python写一个无界面的2048小游戏
2016/05/24 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
四个太阳教学反思
2014/02/01 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
小学英语听课心得体会
2016/01/14 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python