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. Django + pyecharts 实现数据可视化

    1 创建django项目 :Visualization and  APP :Demo >>django-admin startproject Visualization >>p ...

  2. STM32的系统时钟设置SystemClock_Config()探究

    一.首先了解几个硬件名词: stm32有多种时钟源,为HSE.HSI.LSE.LSI.PLL,对于L系统的,还有一个专门的MSI 1.HSE是高速外部时钟,一般8M的晶振,精度比较高,比较稳定. 2. ...

  3. JSP中EL表达式不能使用的问题

    在JSP2.0中,增加了EL语言,可以通过EL语言,可以通过EL语言,实现获取数据,进一步将scriptlet 代码从JSP页面中分离出来.EL语言给大家带来了方便,但有时,也会遇到EL表达式不能显示 ...

  4. MiracleSnow网页设计HTML5+CSS3+JS全套视频教程

    终于把这套课程讲完了,虽然时间隔了很长,但也算有始有终了,这是在YY讲课中我自己录的,讲了网页设计的基础,这也是我第一次给那么多人讲课,讲的不好多多包涵. 前几次视频和课件是分开的,后几次都打包在一起 ...

  5. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  6. R_Studio(贷款)数据规范化处理[最小-最大规范化、零-均值规范化、小数定标规范化]

    农场申请贷款.csv 对“农场申请贷款.csv”中农场大小.降雨量.农场质量.农场收入进行数据规范化处理 行数[4 5 6 7] “农场申请贷款.csv”中存在缺失值,已对数据进行预处理 setwd( ...

  7. 分布式-信息方式-ActiveMQ示例

    实战 代码如下: 信息生产者 package test.mq.helloword; import javax.jms.Connection; import javax.jms.ConnectionFa ...

  8. Docker 的安装与使用

    账号:xcj26密码:X*c*j*5**6**邮箱:**j26@126.com   账号:xichji密码:X*c*j*5**6**邮箱:45*666***@qq.com   摘自:https://b ...

  9. 链表栈C语言实现

    #ifndef LINKSTACK_H_INCLUDED #define LINKSTACK_H_INCLUDED #include <stdlib.h> #include <std ...

  10. 第3周Java编程总结

    1.打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 2. 编写Java程序,求13-23+33-43+…+973-983+ ...