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. 转载：Maven项目mybatis Invalid bound statement (not found)解决方法

    在mapper代理的开发中,程序员需要遵守一些规范,mybatis才能实现mapper接口的代理对象. 它的规范如下: mapper.xml的namespace要写所映射接口的全称类名. mapper ...

  2. Elasticsearch5.0.1 + Kibana5.0.1 + IK 5.0.1安装记录

    最近工作需要,开始研究ES,当前ES的最新版本为5.0.1,从之前的2.x的版本号一下升级到5.x,主要是之前Elastic的产品版本号因为收购等原因很乱,ES 2.X版本的和Kibana 4.x版本 ...

  3. flume坑之channel.transactionCapacity和HdfsSink.batchSize

    不说过程了,直接说结果!一对相连接的channel-HdfsSink,无意间配置如下:...agent.channels.common-channel.transactionCapacity=10.. ...

  4. SQL Server Management Studio 已停止工作 异常错误

    找到类似环境下sql的路径 D:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE\ 复制出 Ss ...

  5. 动态加载zTree，用key属性设置url链接、icon图标等

      setting 举例 1. 设置 zTree 显示节点时,将 treeNode 的 xUrl 属性当做节点链接的目标 URL var setting = { data: { key: { url: ...

  6. DW安装步骤

    Adobe Dreamweaver CC 2015破解步骤 Adobe Dreamweaver CC 2015的安装包和破解补丁可以在这里下载.链接: http://pan.baidu.com/s/1 ...

  7. TextMate2 最新版下载及源码编译过程

    TextMate2 已经开源,我刚编译成功,如果有需要的同学可以点击下面百度网盘的链接下载.我系统版本是:Mac OS X 10.8.4. TextMate version 2.0-alpha.946 ...

  8. shell　转义字符的写法

    在链接中,往往会遇到含有‘&'字符的情形,需要转义方能使用. 以下是它的写法样例,错误的写法勿要再犯!! 链接样例: http://my.example.cn/show/details/htd ...

  9. Node与express开发

    1.初识Express Express 网站上是这样介绍 Express 的: "精简的.灵活的 Node.js Web 程序框架,为构建单页.多页及混合的 Web 程序提供了一系列健壮的功 ...

  10. 实验一 cmd命令的编写

    一.目的和要求 1. 实验目的 (1)掌握命令解释程序的原理: (2)*掌握简单的DOS调用方法: (3)掌握C语言编程初步. 2．实验要求 编写类似于DOS,UNIX的命令行解释程序 (1)自行定义 ...