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. Gym - 101630G The Great Wall (前缀和+树状数组+二分)

    题意:有一个序列,一开始所有的元素都是ai,你可以选择两个长度相等的区间,如果某个元素被一个区间覆盖,那么变为bi,如果被两个区间都覆盖,那么变为ci.问所有区间的选择方法中产生的第k小的元素总和. ...

  2. 使用vue写扫雷游戏

    上班闲来没事做,,心血来潮.想用刚学的vue,写一个扫雷游戏..好了,直入正题. 第一步,先制作一个10x10的格子图..这个divcss就不说了..大家都会. 第二步,制造一个数组,用来生成随机雷区 ...

  3. VCL界面控件DevExpress VCL Controls v19.1.3全新来袭

    DevExpress VCL Controls是 Devexpress公司旗下最老牌的用户界面套包.所包含的控件有:数据录入,图表,数据分析,导航,布局,网格,日程管理,样式,打印和工作流等,让您快速 ...

  4. nginx设置负载均衡

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

  5. CSS的文本属性

    CSS 文本属性可定义文本的外观. 通过文本属性,可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进等. ㈠缩进文本   text-indent  通过使用 text-indent 属性 ...

  6. jquery dblclick()方法 语法

    jquery dblclick()方法 语法 作用:当双击元素时,会发生 dblclick 事件.当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click.在很短的时间内发生两次 ...

  7. ueditor+复制word+图片不能上传

    最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...

  8. css 内容居中

    css: parent{display:table;} child{display:table-cell;vertical-align:middle;}

  9. windows下kafka配置入门 示例

    实验平台与软件: 操作系统:windows7 32  位 java 开发包: jdk1.8.0_144 集群: zookeeper-3.3.6 消息队列: kafka_2.11-0.11.0.1 安装 ...

  10. xwiki使用中的问题

    xwiki 内存限制 问题重现: xwiki启动后内存.cpu一直上涨,不回落,启动后服务访问速度越来越慢,最后无法访问 分析: xwiki在启动时会消耗大量内存和cpu,增加tomcat最大内存限制 ...