JS 实现可停顿的垂直滚动

时间:2022-10-21 22:54:23
  var ScrollMiddle = {
'Odiv':document.getElementById('comment'), // 目标DOM
'Oli': document.getElementById('comment').getElementsByTagName('li'),
'times':30, // 配置滚动时间
'delay':1000, // 配置暂停的时间
inint:function(){
this.size = this.Oli.length;
this.height = 59;
this.countHeight =this.size * this.height;
this.Odiv.innerHTML+=this.Odiv.innerHTML;
this.timer = null;
},
scroll:function(){
var _this = this;
_this.inint();
function scrolls(){ var scrollValue = _this.Odiv.scrollTop;
var sub_timer = null;
var num=0;
if(scrollValue>=_this.countHeight){
_this.Odiv.scrollTop = 0;
}else{
_this.Odiv.scrollTop++;
if(scrollValue%_this.height==0){
clearInterval(_this.timer)
function delay(){
num++;
if(num==3){
num=0;
clearInterval(sub_timer);
sub_timer = null;
clearInterval(_this.timer)
_this.timer = setInterval(scrolls,_this.times);
return false;
}
}
sub_timer = setInterval(delay,_this.delay)
}
}
}
this.timer = setInterval(scrolls,_this.times);
}
}

调用方法:

ScrollMiddle.scroll();

HTML 结构:

<ul id="comment">
<li></li>
......
</ul>

CSS结构:

#comment{
width:200px;
height:200px;
overflow:hidden;
}

JS 实现可停顿的垂直滚动的更多相关文章

  1. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  2. &lbrack;转&rsqb;jquery&period;vTicker(垂直滚动)

    转至:http://www.w3ci.com/plugin/660.html 简介 vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间 ...

  3. javascript焦点图之垂直滚动

    html代码布局,需要用到定位,不细说了 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. Space&period;js – HTML 驱动的页面 3D 滚动效果

    为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.j ...

  5. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  6. Android TextView多行垂直滚动

    在Android应用中,有时候需要TextView可以垂直滚动,今天我就介绍一下怎么实现的.在布局里: <TextView android:id="@+id/tvCWJ" a ...

  7. &lpar;转&rpar;JS浮动窗口(随浏览器滚动而滚动)

    原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随 ...

  8. 自己写一个jQuery垂直滚动栏插件(panel)

    html中原生的滚动栏比較难看,所以有些站点,会自己实现滚动栏,导航站点hao123在一个側栏中,就自己定义了垂直滚动栏,效果比較好看,截图例如以下: watermark/2/text/aHR0cDo ...

  9. Android自定义垂直滚动自动选择日期控件

    ------------------本博客如未明正声明转载,皆为原创,转载请注明出处!------------------ 项目中需要一个日期选择控件,该日期选择控件是垂直滚动,停止滚动时需要校正日期 ...

随机推荐

  1. 第五次实验报告 java 网络编程

    20145306 第五次 java 实验报告 实验内容 客户端与服务器连接,客户端中输入明文,利用DES算法加密,DES的秘钥用RSA公钥密码中服务器的公钥加密,计算明文的Hash函数值,一起传送给客 ...

  2. psycopg2

    简介 Psycopg 是Python语言的PostgreSQL数据库接口. 它的主要优势在于完全支持Python DB API 2.0,以及安全的多线程支持.它适用于随时创建.销毁大量游标的.和产生大 ...

  3. 2016-1-9 Quartz框架的学习,剪裁图片并设置边框

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  4. jquery判断滚动条到底

    $(document).scroll(function(){ var dHeight = $(document).height(); var wHeight = $(window).height(); ...

  5. codeforces 437C The Child and Toy

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  6. Linq 结果转成 json

    public string BindGrid(string page,string rows)        {            int pageIndex = 0;            if ...

  7. Hadoop MapReduce开发最佳实践(上篇)

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  8. &lbrack;HDU1002&rsqb; A &plus; B Problem II

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  9. &lbrack;SCOI2014&rsqb;方伯伯的玉米田

    Description 方伯伯在自己的农田边散步,他突然发现田里的一排玉米非常的不美. 这排玉米一共有N株,它们的高度参差不齐. 方伯伯认为单调不下降序列很美,所以他决定先把一些玉米拔高,再把破坏美感 ...

  10. POJ 2425 A Chess Game(有向图SG函数)题解

    题意:给一个有向图,然后个m颗石头放在图上的几个点上,每次只能移动一步,如果不能移动者败 思路:dfs打表sg函数,然后求异或和 代码: #include<queue> #include& ...