首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

使用jquery实现的循环连续可停顿滚动实例

Posted in Javascript onNovember 23, 2016

使用jquery实现的循环连续可停顿滚动，并应用于滚动图片，滚动层。记得一定要有jquery库哦~

一、单行滚动 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" c />   
<title>无标题文档</title>   
<mce:style type="text/css"><!--   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
--></mce:style><mce:style type="text/css" mce_bogus="1"><!-- 
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;} 
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}</style>   
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>   
<mce:script type="text/javascript"><!--   
function AutoScroll(obj){   
    $(obj).find("ul:first").animate({   
        marginTop:"-25px"  
    },500,function(){   
        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);   
    });   
}   
$(document).ready(function(){   
setInterval('AutoScroll("#scrollDiv")',1000)   
});   
// --></mce:script>   
</head>   
<body>   
<div id="scrollDiv">   
<ul>   
  <li>这是公告标题的第一行</li>   
  <li>这是公告标题的第二行</li>   
  <li>这是公告标题的第三行</li>   
  <li>这是公告标题的第四行</li>   
  <li>这是公告标题的第五行</li>   
  <li>这是公告标题的第六行</li>   
  <li>这是公告标题的第七行</li>   
  <li>这是公告标题的第八行</li>   
</ul>   
</div>   
</body>   
</html>

二、多行滚动  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>无标题文档</title>   
<mce:style type="text/css"><!--   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
--></mce:style><mce:style type="text/css" mce_bogus="1"><!-- 
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;} 
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}</style>   
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>   
<mce: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):500, //卷动速度，数值越大，速度越慢（毫秒）   
            timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）   
        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:500,timer:1000});   
});   
// --></mce:script>   
</head>   
<body>   
<p>多行滚动演示：</p>   
<div id="scrollDiv">   
<ul>   
  <li>这是公告标题的第一行</li>   
  <li>这是公告标题的第二行</li>   
  <li>这是公告标题的第三行</li>   
  <li>这是公告标题的第四行</li>   
  <li>这是公告标题的第五行</li>   
  <li>这是公告标题的第六行</li>   
  <li>这是公告标题的第七行</li>   
  <li>这是公告标题的第八行</li>   
</ul>   
</div>   
</body>   
</html>

三、可控制向前向后的多行滚动   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>无标题文档</title>   
<mce:style type="text/css"><!--   
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}   
--></mce:style><mce:style type="text/css" mce_bogus="1"><!-- 
ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;} 
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">ul,li{margin:0;padding:0}  
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}  
#scrollDiv li{height:25px;padding-left:10px;}</style>   
<mce:script src="jquery-1[1].2.1.pack.js" mce_src="jquery-1[1].2.1.pack.js" type="text/javascript"></mce:script>   
<mce:script type="text/javascript"><!--   
(function($){   
$.fn.extend({   
    Scroll:function(opt,callback){   
        //参数初始化   
        if(!opt) var opt={};   
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮   
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮   
        var timerID;   
        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):500; //卷动速度，数值越大，速度越慢（毫秒）   
            timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）   
        if(line==0) line=1;   
        var upHeight=0-line*lineH;   
        //滚动函数   
        var scrollUp=function(){   
            _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定   
            _this.animate({   
                marginTop:upHeight   
            },speed,function(){   
                for(i=1;i<=line;i++){   
                    _this.find("li:first").appendTo(_this);   
                }   
                _this.css({marginTop:0});   
                _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件   
            });   
        }   
        //Shawphy:向下翻页函数   
        var scrollDown=function(){   
            _btnDown.unbind("click",scrollDown);   
            for(i=1;i<=line;i++){   
                _this.find("li:last").show().prependTo(_this);   
            }   
            _this.css({marginTop:upHeight});   
            _this.animate({   
                marginTop:0   
            },speed,function(){   
                _btnDown.bind("click",scrollDown);   
            });   
        }   
        //Shawphy:自动播放   
        var autoPlay = function(){   
            if(timer)timerID = window.setInterval(scrollUp,timer);   
        };   
        var autoStop = function(){   
            if(timer)window.clearInterval(timerID);   
        };   
         //鼠标事件绑定   
        _this.hover(autoStop,autoPlay).mouseout();   
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定   
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);   
    }      
})   
})(jQuery);   
$(document).ready(function(){   
    $("#scrollDiv").Scroll({line:4,speed:500,timer:1000,up:"btn1",down:"btn2"});   
});   
// --></mce:script>   
</head>   
<body>   
<p>多行滚动演示：</p>   
<div id="scrollDiv">   
<ul>   
  <li>这是公告标题的第一行</li>   
  <li>这是公告标题的第二行</li>   
  <li>这是公告标题的第三行</li>   
  <li>这是公告标题的第四行</li>   
  <li>这是公告标题的第五行</li>   
  <li>这是公告标题的第六行</li>   
  <li>这是公告标题的第七行</li>   
  <li>这是公告标题的第八行</li>   
</ul>   
</div>   
<span id="btn1">向前</span> <span id="btn2">向后</span>   
</body>   
</html>

以上这篇使用jquery实现的循环连续可停顿滚动实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

使用jquery实现的循环连续可停顿滚动实例

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
一款JavaScript压缩工具：X2JSCompactor
Jun 13 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 #Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 #Javascript
详解jQuery的Cookie插件
Nov 23 #Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 #Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 #Javascript
解析jQueryEasyUI的使用
Nov 22 #Javascript
详解jQuery插件开发方式
Nov 22 #Javascript
分块(1) 查找算法(1) decorator(1) 读取(1) 网页解析(1) translation(2) bs4(1) 装饰器(1) 循环(3) 二维数组(2)
You might like
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
js获取日期：昨天今天和明天、后天
2014/06/11 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
Python中的变量和作用域详解
2016/07/13 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
python数据抓取分析的示例代码（python + mongodb）
2017/12/25 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
苹果中国官方网站：Apple中国
2016/07/22 全球购物
西班牙鞋子和箱包在线销售网站：zapatos.es
2020/02/17 全球购物
资料员岗位职责
2013/11/17 职场文书
上课玩手机检讨书
2014/02/08 职场文书
小学家长评语大全
2014/04/16 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
综合管理员岗位职责
2015/02/11 职场文书
严以律己学习心得体会
2016/01/13 职场文书