首页
所有分类
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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
Javascript动画效果（1）
Oct 11 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
js blob类型url的视频下载问题的解决
Nov 29 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
nginx(76) TableField(1) 日志格式分析(1) mounted(1) create(1) el-table(1) Mybatis-Plus(3) 子查询(1) 组策略(1) Windows server 2012(17)
You might like
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
javascript为按钮注册回车事件（设置默认按钮）的方法
2015/05/09 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[46:57]EG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python监控nginx端口和进程状态
2019/09/06 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Pytorch转tflite方式
2020/05/25 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
Feelunique中文官网：欧洲最大化妆品零售电商
2020/07/10 全球购物
计算机毕业生自荐信范文
2014/03/23 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
党员查摆剖析材料
2014/10/10 职场文书
2015年社区工作总结
2015/04/08 职场文书
写给女朋友的保证书
2015/05/09 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
新店开业策划方案怎么书写？
2019/07/05 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python