<!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. Thread Based Parallelism - Thread Synchronization With Lock

    Thread Based Parallelism - Thread Synchronization With Lock import threading shared_resource_with_lo ...

  2. vue学习（一）项目搭建

    首先需要配置node和npm,如果没有安装的话,百度一下安装教程. 如果感觉npm下载速度慢,可以使用淘宝镜像cnpm,链接地址: http://npm.taobao.org/ 安装cnpm npm ...

  3. HTML,Css,JavaScript之间的关系

    简述HTML,Css,JavaScript 网页设计思路是把网页分成三个层次,即:结构层(HTML).表示层(CSS).行为层(Javascript). 1.HTML(超文本标记语言 Hyper Te ...

  4. Ubuntu 18.04 MATLAB 安装及配置

    转载请注明出处,谢谢 原创作者:Mingrui 原创链接:https://www.cnblogs.com/MingruiYu/p/12367846.html 本文要点: Ubuntu 18.04 安装 ...

  5. JS循环解决任意日期间的间隔天数

    用JS循环解决任意日期间的间隔天数,并求截止日期是周几 y1=1900 m1=1 d1=1 y2=2000 m2=5 d2=3 days=0 ydays=0 mdays=0 ddays=d2-d1 f ...

  6. 西门子S7comm协议解析 —— 利用Wireshark对报文逐字节进行解析详细解析S7comm所含功能码以及UserData功能

    又一次成为懒蛋了,标题就这么改了改又是一篇新文章. 网上也有很多S7comm协议的解析,但还是如同我上一篇一样我只是做报文的解析对于S7comm的原理并进行阐述. 有些地方有错误的地方尽请大家指出,共 ...

  7. Android中TimePicker时间选择器的使用和获取选择的时和分

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  8. vuex学习详细解（主页目录

    学习vuex过程中,通过 vue-cli命令来配置和使用vuex笔记整理 vue-cli中配置vuex流程和注意事项 vuex目录配置 vuex的states.js vuex的getters.js v ...

  9. OpenCV检测Marker位姿

    Marker检测采用小觅相机,可以实时检测Marker的位置和姿态,效果如下: 参考代码如下: #include "pch.h" #include <Eigen/Dense& ...

  10. SpringBoot整合NoSql--（三）Redis集群

    (1)集群原理 在Redis集群中,所有的Redis节点彼此互联,节点内部使用二进制协议优化传输速度和带宽. 当一个节点挂掉后,集群中超过半数的节点检测失效时才认为该节点已失效.不同于Tomcat集群 ...