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. HBase总结（十八）Hbase rowkey设计一

    hbase所谓的三维有序存储的三维是指:rowkey(行主键),column key(columnFamily+qualifier),timestamp(时间戳)三部分组成的三维有序存储. 1.row ...

  2. 关于Spring管理的类如何创建对象

    今天项目中出现了空指针错误,其实一看这个错误我就知道是哪里错了.而且以前也总是说,没有真正的改过啊.今天把改进方法和大家共享.现在我们的项目中,大多数我们的管理方式都是交由Spring去管理,至于好处 ...

  3. 很实用的JQuery代码片段（转）

    1 元素屏幕居中 jQuery.fn.center = function () { this.css("position","absolute"); this. ...

  4. Redis(四):常用数据类型和命令

    命令手册网址 http://doc.redisfans.com/ Redis数据类型 l String l Hash l List l Set l Sorted Set Redis中还有3种特殊的数据 ...

  5. atitit.编程语言 类与对象的 扩展机制.doc

    atitit.编程语言 类与对象的 扩展机制.doc 1.1. Java 下一代: 没有继承性的扩展1 1.2. 继承1 1.3. 使用cglib动态为Java类添加方法1 1.4. 工具类 1 1. ...

  6. less css下载及编绎工具

    http://www.lesscss.net less.js下载 LESS 1.5已经放出Beta 1版本,支持source map等新特性,欢迎尝鲜.详细变更请见更新日志. 生产环境使用建议下载1. ...

  7. .net站内搜索

    蜘蛛,spider 爬网站.爬网站的过程:1.发现网站.百度把csdn当成关键网站,顺着已知的网站链接找到新的网站或者新的页面.SEO(搜索引擎优化)的第一个手段:建外链(外部链接).新网站吸引蜘蛛. ...

  8. Codeforces 460E Roland and Rose(暴力)

    题目链接:Codeforces 460E Roland and Rose 题目大意:在以原点为圆心,半径为R的局域内选择N个整数点,使得N个点中两两距离的平方和最大. 解题思路:R最大为30.那么事实 ...

  9. mysql 数据库复制表 create table city1 like city;

    -- 只复制表结构 create table city1 like city; INSERT INTO test2 SELECT * FROM test; -- 上面的表必须存在 -- 复制整张表的数 ...

  10. Linux 文件管理（C语言库函数三）

    找到当前目录 char *getcwd(char * buf,size_t size) getcwd函数把当前工作目录的绝对路径名复制到buf中,size指示buf的大小 如果buf不够大,不能装下整 ...