body{font-size:12px}
        #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative;}
        #demo1{height:auto; text-align:left;}
        #demo2{height:auto; text-align:left;}
        #demo1 li, #demo2 li{list-style-type:none; height:22px; text-align:left; }
html：
<body>
<div id="demo">
    <ul id="demo1">
        <li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
        <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
        <li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
        <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
        <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
        <li><a href="#" target="_blank">今天你写代码了吗</a></li>
        <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
    </ul>
    <div id="demo2"></div>
</div>
</body>
 <script type="text/javascript">
        ;
        window.onload=function(){
            var demo=document.getElementById("demo");
            var demo2=document.getElementById("demo2");
            var demo1=document.getElementById("demo1");
            demo2.innerHTML = demo1.innerHTML;
            function Marquee(){if(demo.scrollTop>=demo1.offsetHeight){
                    demo.scrollTop=;
                }
                else{
                    demo.scrollTop=demo.scrollTop+;
                }
            }
            var MyMar=setInterval(Marquee,speed);
            demo.onmouseover=function(){clearInterval(MyMar)};
            demo.onmouseout=function(){MyMar=setInterval(Marquee,speed); };

        }

    </script>
setInterval(函数/方法，时间间隔)每0.04s执行调用一次Marquee方法。当鼠标over在文字上时，clearInterval停止该方法

js实现文字列表无缝向上滚动的更多相关文章

  1. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  2. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  3. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

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

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

  5. 原生js实现文字无缝向上滚动效果

    在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script> window.onload = roll(50); ...

  6. jquery插件之文字无缝向上滚动

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

  7. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

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

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

  9. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

随机推荐

  1. flask 框架 前端和后端请求超时问题

    部署模式 flask + Gunicorn + nginx 为什么要用Gunicorn + nginx ? 请看知乎大神们的回答:https://www.zhihu.com/question/3852 ...

  2. StandardServer.await: create[8005]java.net.BindException: Address already in use: JVM_Bind错误

    StandardServer.await: create[8005]java.net.BindException: Address already in use: JVM_Bind错误. 原因是:To ...

  3. Python pip install Twisted 出错“Command "c:\python37\python.exe -u -c "import setuptools, tokenize;__file__='C:...\\Twisted\\setup.py'.... failed with error code 1 in C:... \\Twisted"

    如标题所说: python版本是目前最新的3.7.1 结果发现并不是环境问题,而是直接 pip install Twisted 安装的包不兼容 需要手动下载兼容的扩展包Twisted-18.9.0-c ...

  4. sql DATEPART() MONTH() convert() cast() dateadd() DATEDIFF() with(nolock)

    DATEPART() 函数用于返回日期/时间的单独部分,比如年.月.日.小时.分钟等等. 语法 DATEPART(datepart,date) date 参数是合法的日期表达式.datepart 参数 ...

  5. TLS

    1. SSL简介 SSL(SecureSocket Layer)安全套接层,是网景公司提出的用于保证Server与client之间安全通信的一种协议,该协议位于TCP/IP协议与各应用层协议之间,即S ...

  6. C# 运行时中的泛型

    将泛型类型或方法编译为 Microsoft 中间语言 (MSIL) 时,它包含将其标识为具有类型参数的元数据. 泛型类型的 MSIL 的使用因所提供的类型参数是值类型还是引用类型而不同. 第一次用值类 ...

  7. 移动端数据库新王者：realm

    介绍 realm是一个跨平台移动数据库引擎,支持iOS.OS X(Objective-C和Swift)以及Android. 2014年7月发布.由YCombinator孵化的创业团队历时几年打造,是第 ...

  8. Spring Boot全日志设置

    说在前面 这里日志分两种.一种是tomcat的输出(系统)日志,一种是自己定义的日志. 系统日志设置 目标 当springboot接收到请求时记录日志到文件中 实现 你只需要在你的绿叶applicat ...

  9. oracle命令登录数据库

    sqlplus aa/aa@jdbc:oracle:thin:@10.200.130.111:1521:nbact 或者 sqlplus aa/aa@nbact

  10. HDU高精度总结（java大数类）

      HDU1002   A + B Problem II [题意]大数相加 [链接]http://acm.hdu.edu.cn/showproblem.php?pid=1002 Sample Inpu ...