<html>

<head>

<title>scroll up auto smooth</title>

<style>

*{

    margin: 0;

    padding: 0;

    list-style: none;

}

#scroll_outer{

    width: 300px;

    height: 90px;

    margin: 30px auto;

    overflow: hidden;

    background-color: #f4f4f4;

}

#scroll_inner{

    width: 100%;

}

.scroll_inner ul li{

    height: 29px;

    line-height: 29px;

    border-bottom: 1px solid #d4d4d4;

}

</style>

</head>

<body>

<div id="scroll_outer">

    <div class="scroll_inner">

        <ul>

            <li>this is news list items up 1</li>

            <li>this is news list items up 2</li>

            <li>this is news list items up 3</li>

            <li>this is news list items up 4</li>

            <li>this is news list items up 5</li>

            <li>this is news list items up 6</li>

        </ul>

    </div>

</div>

<script>

window.onload = function(){

    var scrollOuter = document.getElementById("scroll_outer"); //get scroll_outer object

    var innerElement = scrollOuter.innerHTML; //get scroll_outer innerHTML

    scroll_outer.innerHTML = innerElement + innerElement; //rewrite scroll_outer innerHTML to be deboule elements

    var scrollInner = document.getElementsByClassName("scroll_inner")[0]; //get scroll_inner object

    setInterval(scrollUp,50);

    function scrollUp(){

        if(scrollInner.offsetHeight == scrollOuter.scrollTop){

            scrollOuter.scrollTop = 0;

        }

        scrollOuter.scrollTop += 1;

    }

}

</script>

</body>

</html>

js不间断平滑地自动向上滚动的更多相关文章

  1. 原生js移动端列表无缝间歇向上滚动

    在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...

  2. jquery插件之文字间歇自动向上滚动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...

  3. 列表内容自动向上滚动（原生JS）

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...

  4. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  6. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  7. js标题文字向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. jquery无缝间歇向上滚动(间断滚动)

    jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...

  9. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

随机推荐

  1. 73. Set Matrix Zeroes

    题目: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. Fo ...

  2. Java IO流总结

    Java IO流分类以及主要使用方式如下: IO流 |--字节流 |--字节输入流 InputStream: int read();//一次读取一个字节 int read(byte[] bys);// ...

  3. centOS填坑笔记(一)

    第一次使用centOS安装软件时,对二进制包的./configure进行配置时(./configure是源代码安装的第一步,主要的作用是对即将安装的软件进行配置,)报错:WARNING: failed ...

  4. backtracking(回溯算法)

    http://blog.csdn.net/zxasqwedc/article/details/42270215 permutation的程式码都会长成这样的格式: ] = { 'a', 'b', 'c ...

  5. iOS 设备的屏幕尺寸一览

    最近在做iPad开发项目 iPhone 设备: iPhone 1G --- 320x480iPhone 3G --- 320x480iPhone 3GS --- 320x480iPhone 4 --- ...

  6. yii2.0框架安装心得

    yii2.0安装心得 能够搜索到这篇文章的朋友相信是对yii框架有兴趣的,但是我不得不吐槽的是,这个安装过程确实让人头疼,接下来就让大家见证一下这个纠结的过程 根据官网的说法,安装这个框架需要用到co ...

  7. WdatePicker 开始日期不能大于结束日期，结束时间不能小于开始时间

    <input class="input_calendar inputcss" id="startDate" runat="server" ...

  8. Android touch事件的派发流程

    Android TouchEvent事件传递机制 通俗易懂,能够了解Touch事件派发的基本流程. Android中的dispatchTouchEvent().onInterceptTouchEven ...

  9. Python 写Windows Service服务程序

    1.需求 为什么要开发一个windows服务呢?之前做一个程序,必须要读取指定目录文件License, 因为其他程序也在读取这指定目录的License文件,且License不同时会修改License的 ...

  10. sdut 1592转置矩阵【稀疏矩阵的压缩存储】【快速转置算法】

    转置矩阵 Time Limit: 1000ms   Memory limit: 32768K  有疑问?点这里^_^ 题目链接:http://acm.sdut.edu.cn/sdutoj/proble ...