<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <div style="width:50px; height:50px; background-color:red;margin-left:2px;">

        文字

    </div>

</body>

</html>

<script>

    var px = 5;

    var myReq;

    function test() {

        var div = document.querySelector('div');

        div.style.marginLeft = (parseInt(div.style.marginLeft.replace('px', '')) + px) + 'px';

        //if (parseInt(div.style.marginLeft.replace('px', '')) > 500) {

        //    px = -px;

        //}

        //if (parseInt(div.style.marginLeft.replace('px', '')) <= 0) {

        //    px = -px;

        //}

        if (parseInt(div.style.marginLeft.replace('px', '')) > 500) {

            //window.cancelAnimationFrame(myReq);

            return;

        }

        myReq = window.requestAnimationFrame(test);

    }

    myReq = window.requestAnimationFrame(test);

</script>

　　

html无卡顿动画实现——requestAnimationFrame的更多相关文章

  1. CSS3 速移动效果动画流畅无卡顿

    js或jquery 元素移动以像素计算,手机上移动效果会有卡顿 利用CSS3 可以很简单的实现流畅的移动动画 transform: translate3d(66px, 88px, 0px) rotat ...

  2. Chrome 下动画卡顿问题的另一种可能

    [现象] 动画出现了明显的卡顿,且仅仅出现在 chrome 中. [原因排查] 一开始使用了css动画的时候已经出现了卡顿.找到如下的文章:CSS3 动画卡顿解决方案.深入浏览器理解CSS anima ...

  3. performance面板使用,以及解决动画卡顿

    https://googlechrome.github.io/devtools-samples/jank//    官方案例 https://juejin.im/post/5b65105f518825 ...

  4. javascript 手势（swipeLeft,swipeRight）滑动中使用css3动画卡顿，开启硬件加速

    今天,在做一个移动端项目,遇到了css3动画卡顿的现象. 例图: 在手势滑动中(swipeLeft,swipeRight)遇到了动画卡顿的现象,最后使用了css3动画-webkit-transform ...

  5. css3动画性能优化--针对移动端卡顿问题

    一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...

  6. ios 动画的时候 如果加阴影 会卡顿的

    记录一下今天某群的聊天记录,一些算是经验吧,以后有用的.呵呵~    动画的时候 如果加阴影 会卡顿的 A  10:59:13            _toView.layer.shadowColor ...

  7. CSS3 动画卡顿性能优化解决方案--摘抄

    最近在开发小程序,与vue类似,它们都有生命周期这回事. onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 到底是什么意思? 所以这又触碰到了我的知识盲区, ...

  8. React-Native Navigator 过渡动画卡顿的解决方案

    在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到: import ...

  9. 完美解决windows10磁盘占用100%并出现卡顿、假死无反应

    完美解决windows10磁盘占用100%并出现卡顿.假死无反应 想必大家也跟我一样,自从用win10系统以后经常会出现这种情况:磁盘突然占用100%然后开始出现假死现象,电脑卡住,点击任何软件没反应 ...

随机推荐

  1. 三、Mongodb Java中的使用

    添加maven依赖 <!--mongodb 驱动--> <dependency> <groupId>org.mongodb</groupId> < ...

  2. 基于 Serverless Component 全栈解决方案

    什么是 Serverless Component Serverless Component 是 Serverless Framework 的,支持多个云资源编排和组织的场景化解决方案. Serverl ...

  3. C++中STL库函数的基本运用

    学了这么长时间的STL库,现在我觉得是有必要对过去的题目和所遇到的问题做一下整理了,以便于之后更好的展开练习: 一. 为什么要用STL库? 1.简单粗暴(省事). 2.便于解决复杂的问题(在贪心题目中 ...

  4. GitHub新手教学(从新手安装到初步使用)

    版权声明:本文为博主原创文章,转载请标明出处! 博客地址:http://blog.csdn.net/qazwsxpcm https://blog.csdn.net/qazwsxpcm/article/ ...

  5. 使用GitHub+Travis-CI+Docker打造自动化流水线

    全文采用的是阿里云的ESC服务器,系统是CentOS 7 示例项目是NodeJS编写,本文主要是Docker的使用,在文章前2/3都是Docker命令介绍,最后我们会完成一个自动化的示例. 准备 注册 ...

  6. ubuntu 配置网卡,DNS, iptables

    # 配置静态ip地址 root@simon:~# vim /etc/network/interfaces auto enp4s0 iface enp4s0 inet static address 19 ...

  7. light oj 1067 费马小定理求逆元

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1067 1067 - Combinations Given n differen ...

  8. 「Kafka」Kafka中offset偏移量提交

    在消费Kafka中分区的数据时,我们需要跟踪哪些消息是读取过的.哪些是没有读取过的.这是读取消息不丢失的关键所在. Kafka是通过offset顺序读取事件的.如果一个消费者退出,再重启的时候,它知道 ...

  9. Linux 文件、目录操作

    Linux中的路径只能使用/,不能使用\ 或\\. cd   切换目录 cd  /    切换到系统根目录,cd即change dir cd  /bin  切换到根目录下的bin目录 cd  ..  ...

  10. ELK学习004：Elasticsearch常规操作

    CRUD 在我们的项目中有日志是一个必不可少的东西,但是日志的检索是一个很麻烦的事情,如每天一个日志,要找到问题就得一个一个找,并不能做到检索功能,这还算好的,如果是分布式的,每个机器都得找一遍,这种 ...