<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. Windows下批处理执行MySQL脚本文件

    转载至http://my.oschina.net/u/660932/blog/117929 一. @echo offSetlocal enabledelayedexpansion::CODER BY ...

  2. Qt 获取Mac地址

    QList<QNetworkInterface> list = QNetworkInterface::allInterfaces(); foreach(QNetworkInterface ...

  3. 控制器与xib关联(用xib布局控制器)

    IOS Xib使用——为控制器添加Xib文件 Xib文件是一个轻量级的用来描述局部界面的文件,它与StoryBoard类似,都是使用Interface Bulider工具进行编辑.但是StoryBoa ...

  4. [Android Pro] app_process command in Android

    reference to : http://blog.csdn.net/wangkaiblog/article/details/46050587 本来以为存放在/systen/bin/下的monkey ...

  5. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（五） 之 加好友，加群流程，消息管理和即时消息提示的实现

    前言 前前一篇留了个小问题,在上一篇中忘了写了,就是关于LayIM已经封装好的上传文件或者图片的问题.对接好接口之后,如果上传速度慢,界面就会出现假死情况,虽然文件正在上传.于是我就简单做了个图标替代 ...

  6. iOS - 直播相关文章

    直播相关文章 直播RTMP可用于测试的服务器地址 FFmpeg avdumpformat输出的tbn.tbc.tbr.PAR.DAR的含义 FFmpeg 3.0 计算视频时长 HLS Streamin ...

  7. Linux 查看 删除进程

    这东西,时间久不用总容易忘....记下来! 1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 to ...

  8. Android -- java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack trace available

    使用Bundle 的getParcelableArray 出现了以下错误: Class not found when unmarshallingjava.lang.ClassNotFoundExcep ...

  9. Linux桌面选型

    Arch Linux 官方仓库提供的桌面环境有 Cinnamon: cinnamon Enlightenment: enlightenment17 GNOME: gnome gnome-extra K ...

  10. Delphi编程建议遵守的规范2---命名规范

    1.1.形参命名建议 所有形参的名称都应当表达出它的用途.如果合适的话,形参的名称最好以字母a 为前缀,例如: procedure SomeProc(aUserName:string; aUserAg ...