1.优化了之前的代码；

2.修正了先前按照文字的条目的数量计算速度的问题，现在改为按照字符的个数计算动画执行一次需要的时间，更为精确；

3.增添了每一行JS代码的注释。

4.这个案例的用途一般为告警信息的展示：

　　告警的条数是不确定的，每条告警的字数是不确定的，展示告警的区域可根据浏览器的分辨率进行放大缩小；

　　本案例的书写满足这几个条件。

5.本案例的实现思路：

1）设置一个展示文字的div:该div的宽度用百分比来表示；

2）设置一个能够放下所有的文字条目的div:该div的宽度通过计算得到；

3）获取每一条文字信息加载到父级div中，通过循环获取到每一条信息的宽度和字符个数，然后分别求和；

4）每一条信息宽度求和得到其父级div的宽度，并将父级div的margin-left设置为其宽度的负数；而且动画是从margin-right:100%开始的，这样就完成了从右向左的动画效果。

5）根据每条信息的字符个数求和后计算出执行一次动画所需的总时间。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

.scrollContainer{

    width:50%;

    height:30px;

    line-height:30px;

    margin-top:10px;

    overflow:hidden;

    background-color:#333;

    }

@-webkit-keyframes scroll{

from {

margin-left:100%;

}

}

@-moz-keyframes scroll{

from {

margin-left:100%;

}

}

@-ms-keyframes scroll{

from {

margin-left:100%;

}

}

.scroll{

    height:30px;

    overflow:hidden;

    -webkit-animation: scroll 5s linear 1s infinite;

    -moz-animation: scroll 5s linear 1s infinite;

    -ms-animation-name: scroll 5s linear 1s infinite;

    animation-name: scroll 5s linear 1s infinite;

    }

.contentItem{

    line-height:30px;

    float:left;

    padding-right:20px;

    box-sizing:border-box;

    font-size:18px;

    overflow:hidden;

    color:#E3FF00;

    text-decoration:none;

    }

.scrollBox:hover{

     -webkit-animation-play-state:paused;

     -moz-animation-play-state:paused;

     -ms-animation-play-state:paused;

     animation-play-state:paused;

    }

</style>

<script src="jquery-1.11.3.min.js"></script>

</head>

<body>

    <div class="scrollContainer">

        <div class="scrollBox" id="content"></div>

    </div>

    <script type="text/javascript">

        $(document).ready(function(){

            var newarry = ["This is the first item!","This is the second item!","This is the third item!","This is the fourth item!"];//需要展示的文字

            var len = newarry.length;//获取数据的条数

            var wordLen = 0;//每条数据中的字符长度变量

            var sum=0;//每条数据所占宽度变量

             $("#content").empty();//清空数据的父级

                for(var i=0;i<len;i++){

                    var divStr = "<a class='contentItem' href=''>"+newarry[i]+"</a>";

                    $("#content").append(divStr);//数据的父级内部插入第i条数据

                    var boxWidth=$(".contentItem").eq(i).width()+22;

                    sum+=boxWidth;//求取所有数据的宽度的和

                    wordLen+=(newarry[i].length+2);//求取所有字符的个数，间距按照2个字符计算

                };

                if(len>0){

                        $(".scrollBox").css({"animation-duration":0.5+0.5*wordLen+"s"},{"-moz-animation-duration":0.5+0.5*wordLen+"s"},{"-webkit-animation-duration":0.5+0.5*wordLen+"s"});

                    };//设置动画循环一次需要的总时间，每个字符为0.5s

                $(".scrollBox").width(sum);

                var width = $(".scrollBox").width();

                $(".scrollBox").css({"marginLeft":-width});//设置数据父级的左边界

                $(".scrollBox").addClass("scroll");//添加动画

            });

    </script>

</body>

</html>

css3 文字轮番滚动效果2——改进版的更多相关文章

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

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

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

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

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

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

  4. TextView实现文字水平滚动效果

    有时候我们使用TextView显示文本,只想把所有内容用一行显示出来,但是一行又显示不完,就需要让文本实现水平滚动的效果. 具体实现方法如下: 1,实现自定义TextView并实现isFocused( ...

  5. Vue开发组件之替代marquee标签，超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

  6. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

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

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

  8. jQuery实现文字横向滚动效果

    HTML代码: <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

随机推荐

  1. Linux 利用 locate 和 find 查找文件

    Linux 利用 locate 和 find 查找文件 命令 locate 用于快速查找文件.文件夹.此命令并没有在磁盘上查找所有文件,而是在预先建立的数据库里进行搜索.可以使用 updatedb 命 ...

  2. vue切换按钮（关闭消失型）

    弹窗: <div class="pop" v-show="isShow"> <i class="iconfont icon-icon ...

  3. SPSS数据分析—因子分析

    我们知道主成分分析是一种降维方法,但是其本质上只是一种矩阵变换的过程,提取出来的主成分并不都具有实际含义,而这种含义往往是我们所需要的,接下来的因子分析可以解决这个问题 因子分析可以看做是主成分分析的 ...

  4. Callable与Future的介绍

    http://www.cnblogs.com/whgw/archive/2011/09/28/2194760.html

  5. C#验证码的生成

    HTML <ul> <li>验证码:</li> <li> <img src="/Login/GetValidateCode?ID=1&q ...

  6. UITableView UITableViewCell

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  7. Linux主机共享目录给Windows主机的方法

    Linux主机共享目录可以通过samba来实现 首先,来看下百科上关于samba的介绍: Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Ser ...

  8. Linux 设备驱动程序 proc seq

    不能再简化 #include<linux/module.h> #include<linux/init.h> #include<linux/seq_file.h> # ...

  9. DB

    数据库(DB):1:降低存储数据的冗余度.2:更高的数据一致性.3:存储的数据可以共享.4:可以建立数据库所遵循的标准. 关系型数据库(RDBMS):基本单位就是表.一张表就是一个实体.MYSQL语句 ...

  10. 小游戏Item表

    [Config]1|0|我|1|10|500|0|8|2|4|b5222d10-55a7-4789-8541-8e7430345d54|0|0[Config] [Config]2|1|公主|1|0|5 ...