纯js实现，完整代码如下：

<!doctype html>

<html lang="en">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="keywords" content="关键字1,关键字2" />

        <meta name="Description" content="描述信息" />

        <title>循环滚动</title>

        <!--CSS/JS-->

        <style type="text/css">

            *{margin:0;padding:0;}

            ul,li{list-style:none;display:block;}

            #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}

            #scrollBox #con1,#con2{width:280px;float:left;}

            #scrollBox li{height:15px;line-height:15px;text-align:center;}

        </style>

    </head>

 <body>

        <!--div-->

    <div id="scrollBox">

        <ul id="con1">

            <li>我是测试内容1！！<li>

            <li>我是测试内容2！！<li>

            <li>我是测试内容3！！<li>

            <li>我是测试内容4！！<li>

            <li>我是测试内容5！！<li>

            <li>我是测试内容6！！<li>

            <li>我是测试内容7！！<li>

            <li>我是测试内容8！！<li>

            <li>我是测试内容9！！<li>

        </ul>

        <ul id="con2"></ul>

    </div>

    <script type="text/javascript">

                var area =document.getElementById('scrollBox');

                var con1 = document.getElementById('con1');

                var con2 = document.getElementById('con2');

                con2.innerHTML=con1.innerHTML;

                function scrollUp(){

                if(area.scrollTop>=con1.offsetHeight){

                    area.scrollTop=0;

                }else{

                    area.scrollTop++

                }

                }

                var time = 50;

                var mytimer=setInterval(scrollUp,time);

                area.onmouseover=function(){

                    clearInterval(mytimer);

                }

                area.onmouseout=function(){

                    mytimer=setInterval(scrollUp,time);

                }

        </script>

 </body>

</html>

预览效果请点击：我的github

js文字滚动效果实现的更多相关文章

  1. js文字滚动效果

    function (global) { var logo = document.getElementById('logo'); var text = document.createTextNode(' ...

  2. Flash 开发环境搭建和文字滚动效果实例

    Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...

  3. android采用SurfaceView实现文字滚动效果

    前言 为了实现文字的滚动效果,之前也重写了TextView效果都不太好,后来对SurfaceView进行完善. 声明     欢迎转载,但请保留文章原始出处:)  小崔博客:http://blog.c ...

  4. 在AxureRP8中实现广告文字滚动效果

    本文是实现动态文字在一个区域中滚动的效果,大概实现过程如下: 先准备一个区域,然后让文字在该区域内水平移动,本文是实现了从右到左的轮询的效果,其他雷同. 在Axure中,这种移动的过程需要动态移动,利 ...

  5. JS文字翻滚效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...

  6. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  7. js文字转移效果

    这个例子算是有点样子的. 思路: 字符串操作.左框里面先是预设的.点击按钮时截取左框中的字符串的前一个字符到右框里的字符串后面,以此循环.点击按钮时按钮变为灰色,在循环完成后恢复.计数的总数(右边)是 ...

  8. js文字跳动效果

    /*! * chaffle v1.0.0 * * Licensed under MIT * Copyright 2013-2014 blivesta * http://blivesta.com */ ...

  9. js文字滚动

      <style type="text/css">  #gongao{width:1000px;height:30px;overflow:hidden;line-hei ...

随机推荐

  1. sql server 2008 学习笔记

    sql server 2008 删除已有的实例 想从setup.exe中区卸载,没找到. 原来还是要从控制面板中卸载,卸载Microsoft SQL Server 2008 卸载界面会提示让你选择要删 ...

  2. RabbitMQ消息队列（九）：Publisher的消息确认机制

    在前面的文章中提到了queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consum ...

  3. Redis 排行榜 自己简单练习

    <?php class Ranks{ const PREFIX = 'zhengban'; protected $redis = ''; /* 初始化 */ public function __ ...

  4. YII 1.0 (7) 登录信息调取 session使用

    登陆信息调取 Yii::app()->user->name,调取登陆的session信息 登录时 调用了 $LoginForm->login() 这个方法上面就能够取到登录的用户名 ...

  5. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML最基础的入门(上)

    一.互联网原理 互联网原理:上网即请求数据. 过程:在本机计算机浏览器上输入网址,发送一个http请求到服务器端,服务器会根据协议作出响应,将对应的网页文件通过http协议再传输给我们本地计算机,将网 ...

  7. phpcms 杂乱总结

    1.根据catid 获取 栏目名称 $CATEGORYS = getcache('category_content_'.$siteid,'commons'); $name = {$CATEGORYS[ ...

  8. CentOS6.5固定IP方式上网(NAT)

    使用NAT模式 虚拟机网络连接使用NAT模式,物理机网络连接使用Vmnet8.如果没有重置一下即可 虚拟机设置里面--网络适配器,网络连接选择NAT模式. 虚拟机菜单栏-编辑-虚拟网络编辑器,选择Vm ...

  9. 【G】开源的分布式部署解决方案 - 预告篇

    为什么想到要做分布式部署解决方案? 当项目越做越大以后,你会发现部署变成一件极其头疼的事情.当然头疼的绝不仅仅在部署一个环节,比如新服务器环境搭建当中就许多坑要踩.各种重复性的工作,包括但不仅限于增加 ...

  10. Fourier分析基础（二）——由级数导出连续Fourier变换

    此处推导参考(照抄) A First Course in Wavelets with Fourier Analysis Second Edition, Albert Boggess& Fran ...