<style type="text/css">
.color_red {
background: red;
}
div
{
position: absolute;
top: 0;
width: 40px;
height: 40px;
} </style>
<div class="color_red" id="divShow"> </div>
<script language="javascript"> function Move() {
var oM = $("divShow").style, t = 0, c = 10;
clearTimeout(Move._t);
function _run() {
if (t <= 500) {
t++;
oM.left = Math.ceil(10 * (t / 10)) + "px";
Move._t = setTimeout(_run, 10);
} else {
oM.left = "0px";
}
}
_run();
}
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
Move();
</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 ...

  10. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

随机推荐

  1. thrift学习之二----学习资料积累

    自己没有仔细安装,从网上搜的安装技术文章,在此做个备份,以防后面用到: http://blog.csdn.net/hshxf/article/details/5567019 http://blog.c ...

  2. Java实现 简单聊天软件

    简单的聊天软件 //客户端 package yjd9; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; ...

  3. 怎样在IIS下配置PHP

    首先下载Windows的PHP安装包.随后将该包解压至C:\PHP.完成上面的步骤后,将C:\php目录下的php.ini-dist文件改名为php.ini,然后拷到C:\Windows目录下. 用记 ...

  4. loadrunner -56992

    设置Run-time Settings ,network speed ,use bandwidth为 512: 回放脚本没有报错,5个并发运行场景报如下错误: vuser_init.c(12): Er ...

  5. Hadoop书签

    1)http://www.cnblogs.com/forfuture1978/archive/2010/03/14/1685351.html 2)http://www.cnblogs.com/sund ...

  6. 关于MyEclipse项目的名字的修改对项目导入导出的影响

    不要修改项目名字,不管是在MyEclipse中(.project文件里面的额name会变)还是在G:\MyEclipseData目录下(.project文件里面的额name不会变),否则导入的时候不能 ...

  7. Asynchronous Methods for Deep Reinforcement Learning(A3C)

    Mnih, Volodymyr, et al. "Asynchronous methods for deep reinforcement learning." Internatio ...

  8. e581. Animating an Array of Images in an Application

    This is the simplest application to animate an array of images. import java.awt.*; import javax.swin ...

  9. C++编程 - tuple、any容器

    C++编程 - tuple.any容器 flyfish 2014-10-29 一 tuple tuple是固定大小的容器,每一个元素类型能够不同 作用1 替换struct struct t1 { in ...

  10. linux,ubuntu14.04.5下安装搜狗输入法

    参考内容: http://www.linuxidc.com/Linux/2015-03/114347.htm https://jingyan.baidu.com/album/ad310e80ae6d9 ...