文档章节

JS走马灯效果(文字滚动效果)

蜻蜓QT
 蜻蜓QT
发布于 2017/06/29 20:03
字数 491
阅读 214
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动</title>
</head>
<style>
    .wrap{
        margin: 100px auto;
        border:1px solid mediumvioletred;
        height: 50px;
        width: 300px;

        position: absolute;

    }

    .hideOverstep{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .wrap{
        line-height: 50px;
    }

    .text{
        position: absolute;
        left: 0;
    }
</style>
<body>
<div id="wrap" class="wrap hideOverstep">
    <span id="text" class="text" >你好,我是一段测试文字,用来测试横向滚动效果的~&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
</div>

<button id="stop">停止</button>
</body>

<script>
    var wrap = document.getElementById('wrap');
    var text = document.getElementById('text');

    var raf;
    var textVal;


    var wrapWidth = wrap.offsetWidth;//获取容器的宽度
    var textWidth = text.offsetWidth;//获取文字的宽度

    var initWidth = textWidth;//获取文字的宽度,并记录

    //当文字的宽度大于容器的宽度时,执行移动方法,走马灯效果
    if(textWidth>wrapWidth){
        raf = requestAnimationFrame(animate);
    }

    function animate() {

        textVal = text.innerHTML;

        var textWidth = text.offsetWidth;//文字的宽度
        var wrapWidth = wrap.offsetWidth;//容器的宽度

        /**
         * 获取在css中设置的left
         *
         * 如果当时style.left 不存在,则赋予初始值
         */
        var left = document.defaultView.getComputedStyle(text,null)['left'];
        if(!text.style.left){
            text.style.left = left;
        }

        /**
         * textWidth - wrapWidth : 文字长度,超出 容器长度的  数值、
         * 超出部分 - 当前向左移动的距离
         * 如果,超出部分的长度,已经,全部移动到左侧了,也就是,文字已经显示到结尾了。distance<=0
         * @type {number}
         */
        var distance = (textWidth - wrapWidth) - Math.abs(parseInt(text.style.left,10));


        /**
         * 当判断,文字到容器头了,先暂停,再开始
         */
        if(parseInt(text.style.left,10)%initWidth == 0 && parseInt(text.style.left,10)!=0){
            cancelAnimationFrame(raf);
            setTimeout(function () {
                raf = requestAnimationFrame(animate);
            },2000);
        }else{
            raf = requestAnimationFrame(animate);
        }

        if(distance>0){
            text.style.left = parseInt(text.style.left,10) - 1 + 'px';
        }else{


            //1、在文字尾部,增加相同的文字
            text.innerHTML = text.innerHTML + textVal;
            //2、如果当前累加后的文字的长度 > 初始时文字的长度的两倍
            if(text.offsetWidth > 2*initWidth ){
                //1、文字整体向右移动 初始时文字的宽度 initWidth ( -2 是为了微调,去除颤动的效果 )
                text.style.left = parseInt(text.style.left,10) + initWidth - 2 + 'px';
                //2、同时,把文字的内容,截取最前面的一部分。
                text.innerHTML = text.innerHTML.substring(0,textVal.length);
            }
        }
    }




    document.getElementById('stop').onclick = function () {
        cancelAnimationFrame(raf);
        text.innerHTML = textVal;
        text.style.left = '0px'
    }


</script>
</html>

© 著作权归作者所有

蜻蜓QT
粉丝 0
博文 8
码字总数 1410
作品 0
深圳
私信 提问
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
近期做网站运维方面的感受与技术分享

作为大二的我,本以为网站设计不是手到擒来的事情么,自己已经有了一年半的学习时间,不对,准确的说是两年的时间,但是真正接手到这个系统上来,迎面而来的却是一个接着一个的问题,没有上手...

Debug客栈
2018/04/24
0
0
用CSS3制作50个超棒动画效果教程

CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动...

鉴客
2010/08/12
7.5K
1
[javascript]文字无缝向上滚动

静态代码: 解释:首先最外层是一个高度只有30px的层,这样大概只能显示一行文字。然后里面有一个 #marquee的层,这个层包含了很多段文字,高度实际超出30px很多,我们要实现的就是将#marque...

吾爱
2014/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
57分钟前
1
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部