<!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. NFA和DFA的区别

      NFA DFA 初始状态 不唯一 唯一 弧上的标记 字(单字符字/ε) 字符(串) 转换关系 非确定 确定 对于每个NFA M都存在一个DFA M' 使得 L(M) = L(M')

  2. 一起了解 .Net Foundation 项目 No.1

    .Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. Akka.NET Akka ...

  3. Thread Based Parallelism - Thread Synchronization With Lock

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

  4. 详解CopyOnWrite容器及其源码

    详解CopyOnWrite容器及其源码 在jave.util.concurrent包下有这样两个类:CopyOnWriteArrayList和CopyOnWriteArraySet.其中利用到了Cop ...

  5. 使用docker搭建FastDFS

    拉取镜像(使用docker-componse可以忽略) [root@localhost ~]# docker pull phinexdaz/fdfs_tracker [root@localhost ~ ...

  6. Rust学习--变量

    0x0 每种编程语言都有变量的概念,我们可以把变量理解为最简单的存储方式,它是编码过程中是必不可少的. Rust的变量很有特色.变量不可变的特性让人想起了Erlang.以及后面的模式匹配,我觉得作者应 ...

  7. 关于css背景的一点总结

    background默认背景区域覆盖内容和内边距及边框,分别有以下属性: 1.background-clip(定义背景绘制区域) border-box 背景覆盖边框最外面 padding-box 背景 ...

  8. 【DTOJ】2703：两个数的余数和商

    DTOJ 2703:两个数的余数和商  解题报告 2017.11.10 第一版 ——由翱翔的逗比w原创,引用<C++ Primer Plus(第6版)中文版> 题目信息: 题目描述 给你a ...

  9. CF547E Mike and Friends [AC自动机，离线树状数组]

    #include <cstdio> #include <queue> #include <vector> #define pb emplace_back using ...

  10. You are my great sunshine

    "何为孤寂?" "清风,艳日,无笑意." "可否具体?" "左拥,右抱,无情欲." "可否再具体?" ...