<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. 【C#】Config配置文件的读写,及无法写入/保存配置文件的问题

    目的: 一些数据为了在项目打包好后也能方便的修改和调用,通常会把这些数据放到配置文件中,避免硬编码,修改配置文件内容更方便,而不用修改源代码. 使用: 在解决方案资源管理器中找到App.config文 ...

  2. C语言 · 数字三角形

    算法训练 数字三角形   时间限制:1.0s   内存限制:256.0MB      问题描述 (图3.1-1)示出了一个数字三角形. 请编一个程序计算从顶至底的某处的一条路 径,使该路径所经过的数字 ...

  3. Apache HttpComponents Custom protocol interceptors通过拦截器自定义压缩

    /* * ==================================================================== * Licensed to the Apache S ...

  4. MongoDB 集群搭建(主从复制、副本及)(五)

    六:架构管理 mongodb的主从集群分为两种: 1:master-Slave 复制(主从)    --从server不会主动变成主server,须要设置才行 2:replica Sets 复制(副本 ...

  5. skynet1.0阅读笔记2_skynet的消息投递skynet.call

    为了了解 skynet.call 的调用过程,需要先看看 skynet的队列是如何把包分到不同工作线程的.看下图 查看 global_queue 的skynet_globalmq_push和skyne ...

  6. org.hibernate.hql.internal.ast.QuerySyntaxExceptionunexpected token: on near line 1

    select d.content,count(s.status) from MesmachineStatus s , Mesmachinestatusdetail d where s.status=d ...

  7. 3D MAX 人物骨骼建设

      3DMax方面所涉及的专业知识:                       (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设: ...

  8. 【转】 如何利用C#代码来进行操作AD

    要用代码访问 Active Directory域服务,需引用System.DirectoryServices命名空间,该命名空间包含两个组件类,DirectoryEntry和 DirectorySea ...

  9. DOM编程 学习笔记(二)

    学习内容: 1.document对象 2.event对象 该对象将标记型文档进行封装 该对象的作用,是对可标记型文档进行操作 常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节 ...

  10. R语言绘图边框

    在R语言中, 绘图边框一共有3个区域: device region : figure region : plot region   : 在描述不同区域大小的时候,有对应的不同参数: din : 返回d ...