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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
js实现下一页页码效果
2017/03/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
wxPython 入门教程
2008/10/07 Python
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
如何卸载python插件
2020/07/08 Python
python实现学生管理系统开发
2020/07/24 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
小学校园广播稿(3篇)
2014/09/19 职场文书
2014年度安全工作总结
2014/12/04 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
民事起诉书范本
2015/05/19 职场文书
爱护公物主题班会
2015/08/17 职场文书
团干部培训班心得体会
2016/01/06 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
java实现web实时消息推送的七种方案
2022/07/23 Java/Android