这两天做一个公告展示轮播的动画，刚开始是用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. 给.Net Core添加Swagger实现接口文档自动生成

    1.添加Nuget相关引用 Swashbuckle.AspNetCore

  2. 查看某个进程PID对应的文件句柄数量，查看某个进程当前使用的文件句柄数量

    ================================ 1.linux所有句柄查询 lsof -n|awk '{print $2}'|sort|uniq -c |sort -nr|more ...

  3. 學校 iPad 使用學校google帳號登入Google Drive 提示"裝置政策提醒"的解決方法

    因爲學校iPad 是給學生和老師使用,大多數是不需要設置鎖屏密碼的,然後 Gsuite 默認是開啓 “行動管理服務” 的策略為基本,就是需要設備設置鎖屏密碼以保障資料安全,不那麽容易被竊取. 然後就出 ...

  4. 使用PowerCLI给ESXi批量设置时间和配置NTP

    在现代的各种业务系统中,时间同步很重要.现在VMware的虚拟化解决方案应用非常广泛,给ESXi宿主机一个统一准确的时间,也给客户机系统一个准确的时间. 生产环境中主机数量少的话倒是可以手动设置,但是 ...

  5. MyBatis框架总结

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

  6. 502 BAD GATEWAY-k8s的cgroup限制了apache的可用内存

    1.release的组件逻辑图 2.表象:按F12,总是报502 BAD GATEWAY 3.nginx日志 [error] #: * upstream prematurely closed conn ...

  7. mysql 开启log-bin功能

      今天搜索了一下增量备份脚本,简单查了一下,增量备份是通过mysql binlog来做的,就是将某段时间内的操作,保存到某二进制日志当中.备份就是备这个日志,恢复也是通过它.然鹅,这里我们需要先开启 ...

  8. js 读取文本文件,日志内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. java23种设计模式之八: 工厂方法模式

    定义: 定义一个创建产品对象的工厂接口,将产品对象的实际创建工作推迟到具体子工厂类当中.这满足创建型模式中所要求的“创建与使用相分离”的特点. 我们把被创建的对象称为“产品”,把创建产品的对象称为“工 ...

  10. Python--context（上下文）（其实是环境）

    最近读Flask的文档,读到很多关于Context(上下文)的术语,如应用上下文,请求上下文等,查阅资料但没有得到理解?有没有比较好的解释? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是 ...