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. mac环境brew安装freetype，imagick等yii2所需要的库

    之前整理了一下内置的php环境,各种缺库是很坑爹的,而且内置的php编译目录找了老半天没找到.所以决定使用brew去重新编译一边php brew的安装就不说了,上篇博客有说.直入主题 brew安装完p ...

  2. flask配置qq邮箱发送邮件

    1.第三方登录qq邮箱不是使用邮箱密码,而是使用独立的授权码: 2.开始在python程序中使用os.environ.get()一直无法获取到环境变量,即使是用source命令重新加载配置文件后使用e ...

  3. ADO.NET 访问数据库

    对数据库的访问时各种数据库应用程序开发的核心技术,.NET框架中提出的ADO.NET技术为应用程序的开发提供了一致的接口,增强了程序的可移植性和可扩展性. a:使用链接对象Connection连接数据 ...

  4. js通过继承实现私有函数

    本文是原创文章,如需转载,请注明文章出处 主要思想就是在继承时,只开放共有的属性和方法,不开放另外某些函数,从而实现私有的作用. function A(){ this.x = 100; this.y ...

  5. javascript进阶系列专题：作用域与作用域链

    字面意思,作用域是指变量和函数的作用范围,换言之,作用域决定了变量和函数的可见性和有效时间.javascript作用域是用函数来区分,与其他语言的大括号不同. for (var i=0; i<5 ...

  6. oralce 密码长度

    Oracle 11G的新特性所致, Oracle 11G创建用户时缺省密码过期限制是180天, 如果超过180天用户密码未做修改则该用户无法登录. Oracle提示错误消息ORA-28001: the ...

  7. 深入浅出Mybatis系列（六）---objectFactory、plugins、mappers简介与配置

    上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配置(mybatis源码篇)>简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习 ...

  8. webform LinQ

    LINQ,语言集成查询(Language Integrated Query)是一组用于c#和VB语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作内存数据. 他是一个 ...

  9. 配置 Windows 下的 nodejs C++ 模块编译环境

    根据 node-gyp 指示的 Windows 编译环境说明, 简单一句话就是 "Python + VC++ 编译环境". 所有需要的安装文件, 我都下载好放到百度云盘了: nod ...

  10. 14073102（CCDIKRecoil）

    [目标] CCDIKRecoil [思路] 1 CCDIK和Recoil的结合 2 Recoil的回弹机制,逐渐回到原来位置 3 添加一个Recoil基类 [步骤] 1 将\Src\GameFrame ...