<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. 【leetcode】Insertion Sort List （middle）

    Sort a linked list using insertion sort. 思路: 用插入排序对链表排序.插入排序是指每次在一个排好序的链表中插入一个新的值. 注意:把排好序的部分和未排序的部分 ...

  2. 加载ComboBox控件

    /// <summary> /// 加载公司 /// </summary> /// <param name="cbbCompany">Combo ...

  3. 108. Convert Sorted Array to Binary Search Tree

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  4. August 23rd 2016 Week 35th Tuesday

    The very essence of romance is uncertainty. 浪漫的精髓就在于它充满种种可能. And the uncertainty of life may be also ...

  5. 图文转换——NABCD

    我们小组要做的是一款可以对文字进行扫描转为txt格式将文字保存下来的移动通信终端的APP. N-need    生活中经常遇到这种问题,看到报纸上的一篇文章,特别想收藏这篇文章,或者是在网上看到一篇好 ...

  6. sql boolean类型

    关于 MySQL 的 boolean 和 tinyint(1) boolean类型MYSQL保存BOOLEAN值时用1代表TRUE,0代表FALSE,boolean在MySQL里的类型为tinyint ...

  7. 苹果官方制作MAC OS的启动U盘的步骤

    工具/原料 一个8G或者更大容量的U盘 MAC OS系统镜像DMG文件 方法/步骤 1.打开应用程序 - 使用工具里的磁盘工具,将U盘格式化为MAC OS扩展日志式,名称输入Mavericks,并创建 ...

  8. Linux 通过os进程pid找到端口号

    [root@xxxx conf]# netstat -lutpn|grep tcp /java tcp /java tcp /java tomcat 监听的一些端口

  9. HTTP1.0和HTTP1.1的主要区别是

    HTTP/.0协议使用非持久连接,即在非持久连接下,一个tcp连接只传输一个Web对象 HTTP/.1默认使用持久连接(然而,HTTP/.1协议的客户机和服务器可以配置成使用非持久连接)在持久连接下, ...

  10. poj 2524:Ubiquitous Religions（并查集，入门题）

    Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 23997   Accepted:  ...