<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. 【vs2010调试】当前不会命中断点 源代码与原始版本不同

    解决方案:全选CPP文件内容,选择 “编辑”-“高级”-“设置选定内容的格式”,保存,重新编译.

  2. 25个增强iOS应用程序性能的提示和技巧(高级篇)(2)

    25个增强iOS应用程序性能的提示和技巧(高级篇)(2) 2013-04-16 14:56 破船之家 beyondvincent 字号:T | T 在开发iOS应用程序时,让程序具有良好的性能是非常关 ...

  3. A Horrible Poem（bzoj 2795）

    Description 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串A的循环节,那么A可以由B重复若干次得到. Input 第一行一个正整 ...

  4. CLR via C#（11）-无参属性、有参数属性(索引器)

    一. 无参属性 1. 定义属性 无参属性就是我们最常见的属性方式,在赋值时可以加入一定的逻辑判断.属性的定义其实不复杂,先看个直观的例子: 说明: 属性要定义名称和类型,且类型不能是void. 属性是 ...

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

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

  6. 【PHP数组的使用】

    PHP数组使用关键字array标识,数组内的元素可以是任意类型,而且可以不是同一种类型,这和c.java不同. 遍历数组的方法可以使用foreach,也可以使用for循环 可以使用print_r或者v ...

  7. shell test 數值 字符串 文件比較

    數值比較 描述 n1 –eq n2 等於 n1 –gt  n2 大於 n1 –ge n2 大於等於 n1 –lt  n2 小於 n1 –le n2 小於等於 n1 –ne n2 不等於   字符串比較 ...

  8. CI框架获取post和get参数 CodeIgniter

    请参考:CI文档的输入类部分: $this->input->post() $this->input->get() ------------------------------- ...

  9. 使用SOUI开发的界面集锦

    仿QQ管家界面

  10. select 框option添加属性 js计算价格 保持两位小数

    <select name="" id=""> <volist name="v['childList']" id=" ...