<!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. Go语言实现：【剑指offer】左旋转字符串

    该题目来源于牛客网<剑指offer>专题. 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左 ...

  2. php curl 相关知识

      整理了下curl  $ch = curl_init(); # 设定url和把结果返回,是否返回头部 curl_setopt($ch, CURLOPT_URL, 'http://www.baidu. ...

  3. pinpoint 修改hbase表TTL值

    操作步骤 查找出数据大的hbase表 root@990fb5560f64:/opt/hbase/hbase-# ls CHANGES.txt LICENSE.txt README.txt conf h ...

  4. 第二篇 Springboot mybatis generate根据数据库表自动生成实体类、Mapper和Mapper.xml

    源码链接:https://pan.baidu.com/s/1iP4UguBufHbcIEv4Ux4wDw 提取码:j6z9 目录结构如下:只需增加一个generatorConfig.xml文件和在po ...

  5. 基于 webGL 的元素周期表 3D 交互展示

    前言 之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...

  6. Idea操作ElasticSearch

    前提: 1.ES服务成功启动 2.node.js成功启动 一.创建索引库 1.目录展示 2.导入依赖 <dependency> <groupId>org.elasticsear ...

  7. Linux内存管理解析(三) : 内核对内核空间的内存管理

    内核采用 struct page 来表示一个物理页,在其中记载了诸多物理页的属性,比如 物理页被几个线程使用(如若没有则表示该页可以释放),页对应的虚拟地址. 首先需要知道的是,分配物理页可以分为两个 ...

  8. mysql必知必会--联 结 表

    联结 SQL最强大的功能之一就是能在数据检索查询的执行中联结(join) 表.联结是利用SQL的 SELECT 能执行的最重要的操作,很好地理解联结 及其语法是学习SQL的一个极为重要的组成部分 外键 ...

  9. BloodHound可视化之域分析

    一.简介 BloodHound是一款将域内信息可视化的单页的web应用程序,是一款在域内进行信息收集的免费工具: bloodhound通过图与线的形式,将域内用户.计算机.组.会话.ACL以及域内所有 ...

  10. nCompass-解决方案介绍

    nCompass-解决方案介绍 1.  IT运维的现状及痛点 业务部门投诉系统不可用,各个部门盘查: 网络是通的:系统资源正常:应用进程状态都是正常的:数据库日志中也没有报错 运维被动: 80%的故障 ...