参考链接：http://www.86y.org/art_detail.aspx?id=587

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字无缝滚动可添加多个DIV</title>
<script>
(function(ns){
        function Scroll(element){  

            var content = document.createElement("div");
            var container = document.createElement("div");
            var _this =this;
            var cssText = "position: absolute; visibility:hidden; left:0; white-space:nowrap;";
            this.element = element;
            this.contentWidth = 0;
            this.stop = false;  

            content.innerHTML = element.innerHTML;  

            //获取元素真实宽度
            content.style.cssText = cssText;
            element.appendChild(content);
            this.contentWidth = content.offsetWidth;  

            content.style.cssText= "float:left;";
            container.style.cssText = "width: " + (this.contentWidth*2) + "px; overflow:hidden";
            container.appendChild(content);
            container.appendChild(content.cloneNode(true));
            element.innerHTML = "";
            element.appendChild(container);  

            container.onmouseover = function(e){
                clearInterval(_this.timer);  

            };  

            container.onmouseout = function(e){
                _this.timer = setInterval(function(){
                    _this.run();
                },20);            

            };
            _this.timer = setInterval(function(){
                _this.run();
            }, 20);
        }  

        Scroll.prototype = {  

            run: function(){  

                var _this = this;
                var element = _this.element;  

                elementelement.scrollLeft = element.scrollLeft + 1;  

                if(element.scrollLeft >=  this.contentWidth ) {
                        element.scrollLeft = 0;
                }
            }
        };
    ns.Scroll = Scroll;
}(window));
window.onload=function(){
    var sc = new Scroll(document.getElementById("scroll"));
    var sc = new Scroll(document.getElementById("scroll2"));
}
</script>
</head>  

<body>
<div id="scroll" style="width:500px;border:1px solid #f60;color:red;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
<br />
<div id="scroll2" style="width:500px;border:1px solid #060;color:006;overflow:hidden;">文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果文字无缝滚动效果</div>
</body>
</html>

实现文字左右滚动 javascript的更多相关文章

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

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

  2. 利用js来实现文字的滚动（也就是我们常常见到的新闻版块中的公示公告）

    首先先看一下大致效果图(因为是动态的,在页面无法显示出来) 具体的实现代码如下: 1.首先是css代码: <style type="text/css"> body,ul ...

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

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

  4. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  5. jquery 文字向上滚动+CSS伪类before和after的应用

    汇总常用技巧——CSS伪类before和after的应用 先上效果图,建议遵循有图有真相的原则,可以上图的地方,还望不要嫌麻烦,毕竟有图的话 可以让读者少花些时间! <!DOCTYPE html ...

  6. jQuery实现公告文字左右滚动的代码。

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

  7. jquery实现文字上下滚动效果

    文字上下滚动是经常用到的js效果,这里介绍一种上下渐隐渐出的文字展现效果! 代码实现很简单,只需要引入jquery就可以. 代码如下: <!DOCTYPE> <head> &l ...

  8. jquery文字纵向滚动效果（带间隔停留）

    <script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotati ...

  9. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

随机推荐

  1. BZOJ2815:[ZJOI2012]灾难(拓扑排序,LCA)

    Description 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过 ...

  2. Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP

    <?php class Car { var $color = "add"; function Car($color="green") { $this-&g ...

  3. PAT B1015 德才论 （25 分）

    宋代史学家司马光在<资治通鉴>中有一段著名的“德才论”:“是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得圣人,君子而与之,与其得小人,不若得愚人 ...

  4. 搞个组装机:D

    时间:2016年7月 主机:就是主机 整机:主机+显示器 推荐:自己组装,淘宝或者京东,或者去淘宝上的宁美国度.攀升兄弟看看. 4000多块配个电脑: 处理器:i5 4590 散片(发热量小) 111 ...

  5. Linux中一个网卡含有多个IP，将从IP升级为主IP的方法

    今天在查看虚拟机的时候,发现某一网卡含有多个IP地址: eno16777736: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu qdisc pfifo_fas ...

  6. MSP430F5438A的串口

    设置串口,最关键的是波特率的设置,推荐一个网站,很方便地计算波特率,http://software-dl.ti.com/msp430/msp430_public_sw/mcu/msp430/MSP43 ...

  7. 20155207王雪纯《网络对抗》Exp4 恶意代码分析

    20155207 <网络对抗> 恶意代码分析 学习总结 实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件 ...

  8. 20155217《网络对抗》Exp03 免杀原理与实践

    20155217<网络对抗>Exp03 免杀原理与实践 实践内容 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程 ...

  9. 20155334 曹翔 Exp3 免杀原理与实践

    20155334 曹翔 Exp3 免杀原理与实践 小记:这次实验,困难重重,失败练练,搞得我们是心急如焚,焦头烂额,哭爹喊娘 一.基础问题回答 杀软是如何检测出恶意代码的? 每个杀软都有自己的检测库, ...

  10. python 穷举法 算24点（史上最简短代码）

    本来想用回溯法实现 算24点.题目都拟好了,就是<python 回溯法 子集树模板 系列 -- 7.24点>.无奈想了一天,没有头绪.只好改用暴力穷举法. 思路说明 根据四个数,三个运算符 ...