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. 基于Red5的视频直播平台

    搭建环境:Win2008 server + jdk1.8+red5-server-1.0.6 下载地址:https://github.com/Red5 修改启动配置文件(修改为jdk路径): 安装模版 ...

  2. 更改make/bison的版本

    一.make版本 1.下载make的压缩包 ftp://ftp.gnu.org/gnu/make/ 2.解压,安装 cd make-x.x ./configuration sh build.sh su ...

  3. MySQL数据库常用命令

    1.连接mysql数据库:mysql -u用户名 -p密码; 2.创建数据库:create database 数据库名称; 3.删除数据库:drop database 数据库名称; 4.使用数据库:u ...

  4. Java中用ClassLoader载入各种资源（类、文件、web资源）的方法

    lassLoader主要对类的请求提供服务,当JVM需要某类时,它根据名称向ClassLoader要求这个类,然后由ClassLoader返回这个类的class对象. ClassLoader负责载入系 ...

  5. 基础算法之选择排序Selection Sort

    原理 首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大)元素,然后放到已排序序列的末尾.以此类推,直到所有元素均排序完毕.一种简单直观的排序算 ...

  6. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  7. 深入浅出Mybatis系列（二）---配置简介（mybatis源码篇）

    上篇文章<深入浅出Mybatis系列(一)---Mybatis入门>, 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们 ...

  8. ROS的单线程Spinning和多线程Spinning

    单线程Spinning ros::spin()是最简单的单线程自旋, 它会一直调用直到结束 用法:  ros::spin(); 另一个单线程spinning是ros::spinOnce(),它定期调用 ...

  9. C# winform中读取HTML代码

    这次的任务是在winform建立一个表格,表格第一列需要绑定数据,表格的第一行也需要绑定数据,而其他的单元格数据则是根据对应的行数据和列数据进行提取. 询问过后,需要在后台拼接HTML代码实现这个功能 ...

  10. Web cookie 详解

    总结:服务端客户端变量建议都是用 utf-8字符集, 前后传递的变量都建议使用url编码处理.php setcookie 保存到客户端的变量会自动url编码的, 所以客户端获取后需要decodeURI ...