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. ijkPlayer 集成

    代码地址如下:http://www.demodashi.com/demo/11957.html 概述 ijkplayer 是一款做视频直播的框架,基于FFmpeg,支持Android和iOS.这里介绍 ...

  2. web报表工具FineReport常见的数据集报错错误代码和解释

    在使用finereport制作报表.若预览错误发生.非常多朋友便手忙脚乱不知所措了,事实上没什么,仅仅要看懂报错代码和含义.能够非常快的排除错误,这里我就分享一下finereport的数据集报错错误代 ...

  3. 动态加载script 和 link

    1.script EventUtil.addHandler(window, "load", function(event){ var script = document.creat ...

  4. 把sqlserver查询结果复制到Excel出现数据记录遗漏

    问题:今天在sqlserver查询,总共有10000记录,把结果复制到Excel,发现少掉352条,用导出csv也是如此. 原因:经排查发现缺少的记录是因为商品名称字段包含英文双引号". 解 ...

  5. redis主从持久化讨论

    Redis有两种持久化方式,AOF和RDB,AOF持久化是指追加写命令到aof文件的方式,RDB是指定期保存内存快照到rdb文件的方式. RDB虽然可以通过bgsave指令后台保存快照,但fork() ...

  6. 在连接mysql数据库时出错：The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone

    这个错误是时区导致的,所以需要在配置连接url后面加上时区: url=jdbc:mysql://localhost:3309/test?serverTimezone=UTC 其中UTC是统一标准世界时 ...

  7. jquery treegrid实例

    前台jqurey代码 function organDatagrid(){ $organ_treegrid = $('#organ_treegrid').treegrid({ url:ctx+'/pet ...

  8. MySQL(8)--Cluster 7.4 rpm centos7

    还没来得及写.我就知道一个月完毕不了,暂时添加的工作总是拖后腿. .. MySQL集群 docker下安装MySQL Cluster报错了.是我image的包少了perl.老实装吧.image又小不了 ...

  9. Atitit..状态机与词法分析  通用分词器 分词引擎的设计与实现 attilax总结

    Atitit..状态机与词法分析  通用分词器 分词引擎的设计与实现 attilax总结 1. 状态机 理论参考1 2. 词法分析理论1 3. 词法分析实例2 4. ---code fsm 状态机通用 ...

  10. spring boot中 使用http请求

    因为项目需求,需要两个系统之间进行通信,经过一番调研,决定使用http请求. 服务端没有什么好说的,本来就是使用web 页面进行访问的,所以spring boot启动后,controller层的接口就 ...