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. html中表单提交

    表单提交代码 1.源代码分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. mysql 8.0.18 手工安装记录

    mysql 8.0.18 手工安装记录 为了日常方便,特记录如下. 一.安装系统依赖包 #.系统依赖包安装 yum -y install make gcc-c++ cmake bison-devel ...

  3. QT Creator 添加Lib库

    LIBS += -LD:/Path/ -lTest1.lib -lTest2.lib 解析:在路径D:/Path/ 下 添加Test1.lib Test2.lib库 -L 和小写'-l"没有 ...

  4. layer 回调

    目前使用的layer版本为1.8.5 在调用layer的JS中,使用end来进行处理 $.layer({ type : 2, shadeClose : true, title : '选择人员', cl ...

  5. 16位masm汇编实现筛法,状压求十万以内素数

    .model small .data table byte 3,12500 dup (0);;0和1不是质数 i word 0 j word 0 .stack 4096 .code main proc ...

  6. vue路由 routers的写法:require用与不用

    vue路由的写法有很多种,这里我只说routers的写法,一种是compcomponent后面直接写路径,另一种是用require的方式,来看代码 import Vue from 'vue' impo ...

  7. Apicloud_(项目)网上书城01_前端搭建

    [本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...

  8. [BZOJ3611][Heoi2014]大工程(虚树上DP)

    3611: [Heoi2014]大工程 Time Limit: 60 Sec  Memory Limit: 512 MBSubmit: 2464  Solved: 1104[Submit][Statu ...

  9. [CSP-S模拟测试]:集合合并(记忆化搜索)

    题目传送门(内部题133) 输入格式 第一行一个正整数$n$. 第二行$n$个正整数$a_i$,表示一开始有$S_i=\{a_i\}$ 输出格式 输出一个非负整数表示最大的收益之和 样例 样例输入: ...

  10. js对象深拷贝、浅拷贝

    浅拷贝1 //浅拷贝1 let obj01 = { name: 'Lily', age: '20', time: ['13', '15'], person: { name: 'Henry', age: ...