<!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. 编译原理实验之SLR1文法分析

    ---内容开始--- 这是一份编译原理实验报告,分析表是手动造的,可以作为借鉴. 基于  SLR(1) 分析法的语法制导翻译及中间代码生成程序设计原理与实现1 .理论传授语法制导的基本概念,目标代码结 ...

  2. 利用django打造自己的工作流平台(三):团队成员任务跟踪系统

    近期受疫情影响公司食堂不开放,为解决同事们的吃饭问题,部门需要在每周五统计下周的订餐情况:员工根据个人意愿选择是否从公司订下周的午餐和晚餐,一旦确定一周保持不变. 通常要完成一次部门内员工的订餐信息收 ...

  3. axios中qs的使用

    首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 地址: https://www.npmjs.com/package/qs qs.parse().qs.string ...

  4. Xcode如何集成Pod教程

    一般开发都会用到很多第三方的框架,利用好他们可以加快开发进度,为了更方便将第三方的框架集成到我们的项目中,Pod是个很好的选择,现在说一下该怎么将Pod集成到我们的Xcode中 第一种方法 命令行的方 ...

  5. display:table的用法

    目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出来的文件k数比用table写出来的要小 ...

  6. Solr系列2-Solr服务安装

    1: Solr简介 1.1 简介: 1.2 下载: 2:Solr 安装 2.1 安装 2.2 目录结构 3 :启动Solr 3.1 启动 3.2使用Solr提供的测试数据 3.5 Solr配置文集 3 ...

  7. VS2015中使用qt开发客户端，QPluginLoader加载dll为null的解决办法

    1,问题重现: 使用vs2015开发一款qt软件,使用了QPluginLoader动态加载插件的方式,调试的时候,发现dll模块没有加载进来,debug发现QPluginLoader的instance ...

  8. php/phpmyadmin新手式环境搭建

    之前就在折腾 zabbix 的时候遇到一个情况, 安装 php6 的时候各种库丢失, 最重要的 gd 经常跑路 只是无意中遇到了一种小方式, 现在已经迷糊了, 前天因为在部署 phpAdmin 的时候 ...

  9. Linux 防SSH暴力攻击

    在下这几天发现我的VPS 总是莫名遭受到 江苏镇江那边的IP 登录请求攻击 ,跟踪了下路由,发现ip是从蒙古那边出去的,然后意识到可能是有扫描端口的.. 方法一: 现在的互联网非常不安全,很多人没事就 ...

  10. 41.Python中加载静态文件

    在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等.因此在DTL中加载静态文件时一个必须要解决的问题.在DTL中,使用static标签来加载静态文件.要使用st ...