首页
所有分类
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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
微信小程序防止多次点击跳转（函数节流）
Sep 19 Javascript
vue项目实现图片上传功能
Dec 23 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
AngularJS(2) 实用文书(952) 观后感(479) HAM-2000(1) 申请书(21) 闭幕词(9) 通知(159) 文书(291) 慰问信(53) 导游词(322)
You might like
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
JS 动态加载脚本的4种方法
2009/05/05 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
2011/03/12 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Node.js Buffer用法解读
2018/05/18 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python实现excel转sqlite的方法
2017/07/17 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
小学英语教学反思
2014/01/30 职场文书
给领导的检讨书
2014/02/16 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
物业公司管理制度
2015/08/05 职场文书
车辆挂靠协议书
2016/03/23 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python