这两天做一个公告展示轮播的动画，刚开始是用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. Flutter状态管理Provider，简单上手

    在之前的文章中介绍了 Google 官方仓库下的一个状态管理 Provide.乍一看这俩玩意可能很容易就被认为是同一个东西,仔细一看,这不就差了一个字吗,有什么区别呢. 首先,你要知道的最大的一个区别 ...

  2. tp5博客项目实战2

    改虚拟主机 (用www.tp5.com直接访问替代localhost/blog/tp5/public) 1.host修改 位置C:\Windows\System32\drivers\etc 127.0 ...

  3. table列表全选

    <table><tr><td><input type="checkbox" /></td><td></ ...

  4. SSRAM、SDRAM和Flash简要介绍

    问题1:什么是DRAM.SRAM.SDRAM?答:名词解释如下DRAM--------动态随即存取器,需要不断的刷新,才能保存数据,而且是行列地址复用的,许多都有页模式SRAM--------静态的随 ...

  5. 050 Android 百度地图的使用

    1.初始化地图 //初始化地图 private void initMapView() { //1.获取地图控件引用 mMapView = findViewById(R.id.bmapView); mB ...

  6. 去掉右键Open Folderas Intellij IDEA Project

    解决: WIN+R键打开运行,输入regedit 打开注册表 在地址栏输入: 计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell 然 ...

  7. time模块/datetime模块/calendar模块

    time模块时间的表示形式时间戳:以整型或浮点型表示⼀个时间,该时间以秒为单位,这个时间是以1970年1⽉1⽇0时0分0秒开始计算的. 导入time import time 1.返回当前的时间戳 no ...

  8. WUSTOJ 1235: 计算矩阵的鞍点（Java）

    1235: 计算矩阵的鞍点 题目   输出二维数组中行上为最大,列上为最小的元素(称为鞍点)及其位置(行列下标).如果不存在任何鞍点,请输出"404 not found"(不带引号 ...

  9. 1186: 零起点学算法93——改革春风吹满地（C）

    一.题目 http://acm.wust.edu.cn/problem.php?id=1186&soj=0 二.分析 多组输入,'0'结束: 顶点的个数在3至100之间: 一定顺序输入坐标: ...

  10. Python3 和 Python2的区别

    目录 print Python2.7的print不是一个function Python3里的print是一个function. Unicode Python 2 有 ASCII str() 类型,un ...