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. mysql5.6新功能索引条件下推(转载)

    原文地址:http://www.cnblogs.com/zengkefu/p/5684101.html 一什么是"索引条件下推" "索引条件下推",称为 Ind ...

  2. 高性能mysql 第4章 Schema与数据类型优化

    基本原则: 更小的通常更好:占用更少的磁盘 内存和cpu缓存.如varchar(2)和varchar(100). 简单就好:比如整形比字符型代价更低.使用日期型来存储日期而不是字符串.使用整形存储ip ...

  3. 【洛谷P1280】尼克的任务

    题目大意:一个人在时间 [1,N] 内工作,现有 M 个任务,每个任务需要在一段固定的时间区间内完成,任务之间的时间可能有重叠.若当前时间有任务要开始,且人处于空闲状态,则一定要这个人来做,否则这个人 ...

  4. 交互式数据可视化-D3.js(三)比例尺

    线性比例尺 线性比例尺是常用比例尺常用方法有: var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - 定义或 ...

  5. .NET界面控件DevExpress全新发布v19.1.5|改进Office 2019主题

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  6. DveOps路线指南

    学习DevOps所需的技能 1. 编程语言 python  java javascrit 2. 学习不同的操作系统概念 进程管理,线程和兵法,套接字,I/O管理,虚拟化,内存储存储和文件系统. 3. ...

  7. qt5-自定义类

    创建一个自定义按钮类: 右击工程目录--->--->--->---> ---> --->

  8. JavaScript基础——JavaScript语法基础(笔记)

    JavaScript语法基础(笔记) 1.语言编码 JavaScript语言建立在Unicode字符集基础之上,因此脚本中,用户可以使用双字节的字符命名常量.变量或函数等. [示例] var 我=&q ...

  9. 函数返回指针类型(strchr函数)

    #include<stdio.h> #include<string.h> char *mystrchr(char *s,char c) { while(*s) { if(*s ...

  10. jQuery_CSS类操作

    下面讲述jQuery操作css类,进行类的添加,移除,以及前两项功能的结合操作. <!DOCTYPE html> <html> <head> <meta ch ...