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. led灯的翻转函数

    定义: uint8_t led1_val; void LED1(uint8_t* val){ *val =!(*val); if( *val == 0x00 ) HAL_GPIO_WritePin ( ...

  2. 在VIM中进行快速的查找和替换

    VIM是被誉为非常高效的文本编辑软件.但是掌握并高效的使用是件有难度的事情.在VIM中进行快速的查找和替换是提高VIM使用效率的重要方法.下面是我在阅读VIM用户手册时整理的一些资料: 行内搜索. f ...

  3. flask笔记1-安装

    1.创建应用的根目录: 2.在根目录下创建独立的虚拟python运行环境,创建完成后当前目录会有一个文件夹,即该独立环境(使用--no-site-pachages参数将不会复制任何系统python环境 ...

  4. block，inline和inlinke-block细节对比

    block,inline和inlinke-block细节对比 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度 ...

  5. Configure Apache Virtual Hosts - CentOS 7

    Difficulty: 2Time: 15 minutes Want to host websites on your server? Using Apache? Great. This articl ...

  6. angularjs路由

    需要引入angular.js,angular-ui-router.min.js <ul> <li><a href="#home">首页</ ...

  7. 关于KINECT2 和ＲＯＳ接口安装的问题

    具体安装过程见此博客 http://www.itdadao.com/articles/c15a450477p0.html 感谢博主． 注意,在我自己的电脑上,最后测试的两条代码执行不了,即:1)ros ...

  8. Python面向对象高级之类的特殊成员

    上文介绍了Python的类成员以及成员修饰符,从而了解到类中有字段.方法和属性三大类成员,并且成员名前如果有两个下划线,则表示该成员是私有成员,私有成员只能由类内部调用.无论人或事物往往都有不按套路出 ...

  9. Mysql主数据库+备份数据库部署教程

    转:http://www.111cn.net/database/mysql/76450.htm 本文我们来讲讲Mysql主备如何部署,这里说的主是指Mysql主数据库,备是从数据库,备可以是多个,也可 ...

  10. MySQL数据库的一些基本操作及注释

    --Created by mac on 2017/1/4. -- MySQL数据库 -- ****************** 一. 连接数据库服务器的基础命令 ******************* ...