这两天做一个公告展示轮播的动画，刚开始是用setinterval写的，后来发现做出来的动画效果有抖动的现象，动画不流畅，遂决定试试requestAnimationFrame，之前也只是耳闻，没有用过，用过之后发现：“哎呦喂，不错哦！”

我们看代码

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>记录滚动</title>

    <style>

    .panel{

        width:340px;

        padding:10px;

        text-align: center;

        background-color:#FF3C3C;

        border-radius: 0 0 8px 8px;

     }

    h2{

        color:#fff;

        margin: 5px;

    }

    .activity{

        width: 300px;

        margin: 0 auto;

        position: relative;

        overflow: hidden;

        height: 165px;

        background-color: #fff;

        border-radius: 5px;

    }

    .activity ul{

        top: -15px;

        padding: 0;

        color: #666;

        position: relative;

    }

    .activity li{

        height: 34px;

        padding:0;

        font-size: 12px;

        line-height: 34px;

        list-style: none;

        border-bottom: 1px dotted #d2d2d2;

    }

    </style>

    </head>

    <body>

      <div class="panel">

        <h2>公告展示</h2>

        <div class="activity" id="J_Activity">

            <ul>

                <li>我是公告列表1</li>

                <li>我是公告列表2</li>

                <li>我是公告列表3</li>

                <li>我是公告列表4</li>

                <li>我是公告列表5</li>

            </ul>

        </div>

      </div>

    </body>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    <script type="text/javascript" charset="utf-8">

    $(function () {

        var listPanel = $('#J_Activity ul');

        var timer;

        var z = 0;

        function animate(){

            requestAnimationFrame(function fn(){

                z-=.3;

                if(z<=-35){

                    z = 0;

                    listPanel.find("li:first").appendTo(listPanel);

                }

                listPanel.css('top',z);

                timer = requestAnimationFrame(fn);

            });

        }

        animate();

        listPanel.on('mouseenter',function(){

            cancelAnimationFrame(timer);　　　　//停止

        })

        listPanel.on('mouseleave',function(){

            animate();　　　　　　　　　　　　　　//继续运动

       })

    });

    </script>

</html>

我们看到和setinterval和settimeout的用法，几乎完全一样，只是没有时间这个参数，这也正是requestAnimationFrame的高明之处，因为它的渲染是跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那它就是16.8ms绘制一次；如果浏览设备绘制间隔是10ms, 那它就是10ms绘制一次。这样就不会存在过度绘制的问题，动画不会掉帧，自然就流畅。

H5中的requestAnimationFrame的更多相关文章

  1. swift禁用webView对H5中数字，链接，日期，地址，电话号码做解析

    showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...

  2. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  3. 从web图片裁剪出发：了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  4. iOS下使状态栏颜色与H5中背景色一致

    iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致.如下图所示: 其实出现这种原因,主要是因为使用16进制颜色, ...

  5. 微信H5中静默登录及非静默登录的正确使用姿势

    在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...

  6. h5中不能用js来直接获取网络码和机器码的。

    h5中不能用js来获取mac的.是可以获取ip的.代码  <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...

  7. H5中的语义化标签

    H5中的语义化标签也就是之前的id = “header”演变而来的 只不过之前是id 现在变成了标签而已 什么是语义化: 根据内容结构化(内容语义化) 选择合适的标签(代码语义化) 便于开发者阅读和写 ...

  8. js中的requestAnimationFrame

    js中的requestAnimationFrame requestAnimationFrame的作用就是重绘 一个简单的demo如下 <!DOCTYPE html> <html la ...

  9. h5中的audio音频标签与对应的dom对象

    HTML5中提供了一个<audio>标签,同时也提供了一个Audio对象给JavaScript去操作,这个对象属于HTML的DOM对象. H5中的<audio>标签 此标签是H ...

随机推荐

  1. 为什么每次登录要手动 source /etc/profile ...

    由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...

  2. python爬取网页数据方法

    """#最基本,请求地址无参数# response=urllib.request.urlopen("https://www.scetc.edu.cn" ...

  3. SPSS 2019年10月31日 20:20:53今日学习总结

    ◆描述性统计分析 概念:描述性统计分析方法是指应用分类.制表.图形及概括性数据指标(去均值,方差等)来概括数据分布特征的方法. 而推断性统计分析方法则是通过随机抽样,应用统计方法把从样本数据得到的结论 ...

  4. 原装win8系统电脑崩溃问题解决

    原装win8系统电脑崩溃问题解决 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:之所以撰写本篇关于win8原装系统电脑崩溃的博文,一是要吐槽一下原装w ...

  5. Redis HashMap 使用

    散列类型相当于Java中的HashMap,他的值是一个字典,保存很多key,value对,每对key,value的值个键都是字符串类型,换句话说,散列类型不能嵌套其他数据类型.一个散列类型键最多可以包 ...

  6. NET CORE与Spring Boot

    NET CORE与Spring Boot 本文分别说明.NET CORE与Spring Boot 编写控制台程序应有的“正确”方法,以便.NET程序员.JAVA程序员可以相互学习与加深了解,注意本文只 ...

  7. MyBatis框架总结

    一. MyBatis简介 MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果集的检索.MyBati ...

  8. Asp.Net Core集成Swagger

    工作中一个公司会有很多个项目,项目之间的交互经常需要编写 API 来实现,但是编写文档是一件繁琐耗时的工作,并且随着 API 的迭代,每次都需要去更新维护接口文档,很多时候由于忘记或者人员交替的愿意造 ...

  9. 第一周——不同java 的发展史你，注定成为不了领袖型人才

     James Gosling  1991年,James 高斯林在Sun公司的工程师小组想要设计这样一种小型计算机语言,该语言主要用于电视盒的消费类电子产品上.另外,由于不同的厂商选择不同的CPU和操作 ...

  10. [转帖]Nginx服务器的六种负载均衡策略详解

    Nginx服务器的六种负载均衡策略详解 咔咔侃技术 2019-09-11 17:40:12 一.关于Nginx的负载均衡 在服务器集群中,Nginx起到一个代理服务器的角色(即反向代理),为了避免单独 ...