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. 【JAVA秒会技术之秒杀面试官】秒杀Java面试官——集合篇（一）

    [JAVA秒会技术之秒杀面试官]秒杀Java面试官——集合篇(一) [JAVA秒会技术之秒杀面试官]JavaEE常见面试题(三) http://blog.csdn.net/qq296398300/ar ...

  2. Python 实现的猫脸识别、人脸识别器。

    代码地址如下:http://www.demodashi.com/demo/13071.html 前言: OpenCV是开源的跨平台计算机视觉库,提供了Python等语言的接口,实现了图像处理和计算机视 ...

  3. Mysql 常用函数集

    1.分类导航 一共分为5类函数 . 字符型函数 . 数值型函数 . 日期型函数 . 统计型函数 . 其它型函数 2.字符型函数[约48个] ascii(str) bin(n) bit_length(s ...

  4. unity, change parent and keep localPosition or worlPosition

    node.parent=othernode等价于node.setParent(othernode,true),是保持世界坐标不变. node.setParent(othernode,false)则可以 ...

  5. angular4 开发记录

    1,传值问题 page setValue:  [routerLink]="['/product-details', product.id]"> ts     seValue: ...

  6. MII、GMII、RMII、SGMII、XGMII

    MII即媒体独立接口,也叫介质无关接口.它是IEEE-802.3定义的以太网行业标准.它包括一个数据接口,以及一个MAC和PHY之间的管理接口(图1). 数据接口包括分别用于发送器和接收器的两条独立信 ...

  7. Xilinx-7Series-FPGA高速收发器使用学习—概述与参考时钟篇

    xilinx的7系列FPGA根据不同的器件类型,集成了GTP.GTX.GTH以及GTZ四种串行高速收发器,四种收发器主要区别是支持的线速率不同,图一可以说明在7系列里面器件类型和支持的收发器类型以及最 ...

  8. pthread_cleanup_push和pthread_cleanup_pop清除函数是否执行的说明

    示例1: #include <stdio.h> #include <pthread.h> void* clean(void* arg) { printf("clean ...

  9. ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例

    这篇文章主要介绍了ThinkPHP使用PHPExcel实现Excel数据导入导出,非常实用的功能,需要的朋友可以参考下 本文所述实例是使用在Thinkphp的开发框架上,要是使用在其他框架也是同样的方 ...

  10. mysql bin-log三种模式

    MySQL的bin-log日志备份有三种模式,分别是:ROW.Statement.Mixed 一.Row 日志会记录成每一行数据被修改成的形式,然后再slave端再对相同的数据进行修改,只记录要修改的 ...