<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. pycharm远程上传文件到Linux

    配置远程SFTP 1. 在PyCharm中打开SFTP配置面板,路径为Tools => Deployment => Configuration: 2. 配置Connection参数设置,填 ...

  2. [SQL Server]如何快速查找使用了某个字段的所有存储过程

    [SQL Server]如何快速查找使用了某个字段的所有存储过程       当一个系统中使用了很多的表,并且存在大量的存储过程,当数据库中的某个表删除了某个字段,那么相应的存储过程也需要改动,但是我 ...

  3. grep(Global Regular Expression Print)

    .grep -iwr --color 'hellp' /home/weblogic/demo 或者 grep -iw --color 'hellp' /home/weblogic/demo/* (-i ...

  4. web页面记住密码存在安全问题 - 处理方式

    现在一般安全网站都不会做记住密码功能,因为记住密码存在安全缺陷. 不考虑网络拦截问题,如果是登录页面记住密码,第二次登录,直接进入开发者模式修改类型为text即可看到密码. 处理方式: 1.把auto ...

  5. gcc创建和使用静态库、动态库

    http://www.cnblogs.com/dyllove98/archive/2013/06/25/3155599.html 目录树结构: test/include/hello.h #ifdef ...

  6. CentOS出错You don't have permission to access on this server

    之前配置phpmyadmin的时候,在浏览器上输入http://192.168.8.250/phpmyadmin/ 也遇到了You don't have permission to access on ...

  7. nfs 是Network File System 网络文件系统

    NFS的基本原刚是容许不同的客户端及服务通过一组PRC分享相同的文件系统,它是独立于操作系统,容许不同硬件及操作系统的系统共同进行文件的分享.NFS在文件传送过程中依赖于RPC协议.远程过程调用Rem ...

  8. ASP.NET MVC中Controller返回值类型ActionResult

    1.返回ViewResult视图结果,将视图呈现给网页 public class TestController : Controller { //必须存在Controller\Test\Index.c ...

  9. HTML5学习之WebSocket通讯（六）

    WebSocket是下一代客户端-服务器的异步通信方法. WebSocket最伟大之处在于服务器和客户端可以在任意时刻相互推送信息 WebSocket允许跨域通信 Ajax技术需要客户端发起请求,We ...

  10. Newtonsoft.Json(Json.Net)学习笔记-高级使用（转）

    1.忽略某些属性 2.默认值的处理 3.空值的处理 4.支持非公共成员 5.日期处理 6.自定义序列化的字段名称 7.动态决定属性是否序列化 8.枚举值的自定义格式化问题 9.自定义类型转换 10.全 ...