1、使方块移动

源码 :

<script type="text/javascript">
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.background = "red";
    div.style.position = "absolute";
    div.style.left =  "0px";
    div.style.top = "0px";

    //每隔50毫秒执行该函数。
    setInterval(function(){
        div.style.left = parseInt(div.style.left) + 5  + "px";
        div.style.top =  parseInt(div.style.top)  + 5  + "px";
    },50);
</script>

截图:

js实现动画(移动方块)的更多相关文章

  1. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  2. js双层动画幻灯

    js双层动画幻灯 点击下载

  3. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  4. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  5. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  6. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  7. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  8. JS实现动画的四条优化方法

    JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

  9. vue three.js 结合tween.js 实现动画过渡

    参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...

随机推荐

  1. mysql细说show slave status参数详解(最全)

    1. Slave_IO_State 这里显示了当前slave I/O线程的状态(slave连接到master的状态).状态信息和使用show processlist | grep "syst ...

  2. Gym - 101170B British Menu (强连通缩点+dp)

    题意:求一个有向图上的最长路(每个强连通分量的点不超过5个) 首先对强连通分量缩点,暴力预处理出len[k][i][j]表示第k个强连通分量里的第i个点和第j个点之间的最长路径,设状态(k,i,f)表 ...

  3. nginx设置负载均衡

    ...... why负载均衡,随着企业业务增长和海量请求,给服务端造成海量并发,导致响应不及时需扩容后端服务,前端需要负载均衡,均摊请求,让服务端吞吐请求的能力提升 单点服务方式,一个点挂掉整个服务就 ...

  4. pymysql操作数据库、索引、慢日志管理

    目录 pymysql操作数据库 简单操作 sql的注入问题 sql注入问题解决办法 sql注入问题模板总结 利用pymysql操作数据库 (增删改),conn.commit() 索引 1.为何要有索引 ...

  5. vue的组件创建和使用

    首先说一下vue组件 什么是组件? 在我的理解,vue的所有页面内容都是组件. 什么是父子组件? 因为所有的页面内容都是组件,那么怎么区分父子组件呢?其实很简单,现在有一个页面,在js里面的 comp ...

  6. viewport的相关知识点

    主要说一些viewport的基本原理以及使用 ㈠概念 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的 ...

  7. AngularJS 前端 MVC 的设计与搭建

    代码 #未引入MVC框架之前的代码 <!doctype html> <html> <head> <meta charset="UTF-8" ...

  8. 51 Nod 1069 Nim游戏

    分析: a1 xor a2 xor a3 ... xor an !=0 则为必胜态 a1 xor a2 xor a3 ... xor an ==0 则为必败态 也就是说只要计算异或值,如果非零则A赢, ...

  9. 【CF963C】Cutting Rectangle(数论,构造,map)

    题意: 思路:考虑构造最小的单位矩形然后平铺 单位矩形中每种矩形的数量可以根据比例算出来,为c[i]/d,其中d是所有c[i]的gcd,如果能构造成功答案即为d的因子个数 考虑如果要将两种矩形放在同一 ...

  10. python生成手机号

    """ 电信号段:133/153/180/181/189/177; 联通号段:130/131/132/155/156/185/186/145/175; 移动号段:134/ ...