这两天做一个公告展示轮播的动画，刚开始是用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. AWS 解决方案架构师考点（Storage）

    目录 一.S3 存储类 二.S3 考点 三.Storage Gateway 3.1.File Gateway 3.2.Volume Gateway /3.3.Tape Gateway 一.S3 存储类 ...

  2. Redis源码解析

    一.src/server.c 中的redisCommandTable列出的所有redis支持的命令,其中字符串命令包括从get到mget:列表命令从rpush到rpoplpush:集合命令包括从sad ...

  3. RISC-V汇编指南

    原文出处:https://github.com/riscv/riscv-asm-manual/blob/master/riscv-asm.md RISC-V Assembly Programmer's ...

  4. 1024多人激情在线聊天室---select函数的使用

    效果展示 step1.服务器启动!端口号3006 step2.1号客户端启动!jack加入了群聊 step3.2号客户端启动!kelly加入了群聊 step4.3号客户端启动!zwj加入了群聊 ste ...

  5. 20175316 盛茂淞 2018-2019-2 《Java程序设计》实验三《敏捷开发与XP实践》 实验报告

    实验内容与要求 1.XP基础 极限编程(Extreme Programming,XP)是一种全新而快捷的软件开发方法.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: XP是 ...

  6. 记一次Spring Cloud压力测试

    前言 公司打算举办一场活动,现场参与活动人数比较多.针对于可能访问比较密集的接口进行压力测试.使用jmeter进行测试,请求并发稍微多些,系统就会挂起. 针对压力测试出现的问题,因为并发超过1秒钟10 ...

  7. VC++:创建，调用Win32静态链接库

    概述 DLL(Dynamic Linkable Library)动态链接库,Dll可以看作一种仓库,仓库中包含了可以直接使用的变量,函数或类. 仓库的发展史经历了"无库" ---& ...

  8. 下载GDB调试工具peda

    命令: 1.git clone https://github.com/longld/peda.git ~/peda 2.echo "source ~/peda/peda.py" & ...

  9. Git 版本恢复命令reset

    reset命令有3中方式: git reset -mixed: 此为默认方式,不带任何参数的git reset, 使用这种方式,项目会回退到某个版本,只保留源码,回退commit和index的信息. ...

  10. Vs code 下设置python tasks.json

    { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.jso ...