这两天做一个公告展示轮播的动画，刚开始是用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. iCMSv7.0.15后台database.admincp文件仍存在SQL注入漏洞

    闲着无聊,国庆时间没事做,又在Q群看到这种公告,只好下个icms慢慢玩.(PS:医院和学校居然都关网站了) 无奈自己太菜,审不出问题.只好上网百度icms之前的漏洞.然后居然成功在iCMSv7.0.1 ...

  2. Windows 10系统快捷键

    虚拟桌面 创建新的虚拟桌面:Win + Ctrl + D 关闭当前虚拟桌面:Win + Ctrl + F4 切换虚拟桌面:Win + Ctrl +左/右 任务视图:Win + Tab Win10常用W ...

  3. nginx 四个主要组成部分

    1.Nginx 二进制可执行文件 由各模块源码编译出的一个文件 2.Nginx.conf 配置文件 控制nginx如何运行 3.access.log 访问日志 记录http请求信息 4.error.l ...

  4. python+unittest框架第一天unittest之简单认识Test Fixure：测试固件【8月17更新】

    20万的慢慢会实现的吧,hhh unittest框架,我就不在介绍了,百度有很详细的介绍. 我们只要了解: 1.unittest是单元测试框架 2.它提供用例组织与执行:在实际工作中案例可能有上百条, ...

  5. K8S从入门到放弃系列-(7)kubernetes集群之kube-scheduler部署

    摘要: 1.Kube-scheduler作为组件运行在master节点,主要任务是把从kube-apiserver中获取的未被调度的pod通过一系列调度算法找到最适合的node,最终通过向kube-a ...

  6. 将dubbo中使用的动态代理作为工具类

    ReflectUtils package per.qiao.util.javassistUtil; import java.lang.reflect.Constructor; import java. ...

  7. 使用UTF8字符集存储中文生僻字

    使用UTF8字符集存储中文生僻字 一.相关学习BLOG https://www.cnblogs.com/jyzhao/p/8654412.html http://blog.itpub.net/7818 ...

  8. （六）maven之常用插件

    一.maven的插件 maven官方插件:http://maven.apache.org/plugins/index.html 二.常用插件之:javadoc 作用:生成代码文档 2.1 编写代码,并 ...

  9. Java Convention 公约数计算

    Java Convention 公约数计算 /** * <html> * <body> * <P> Copyright 1994-2018 JasonInterna ...

  10. Linux 安装Mysql（图文教程）

    原文:Linux 安装Mysql(图文教程) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net ...