JS基本动画
<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基本动画的更多相关文章
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...
- vue three.js 结合tween.js 实现动画过渡
参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...
- js抛物线动画——加入购物车动效
参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...
随机推荐
- jQuery 之正则表达式篇
从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...
- 防止短连接耗尽你的动态TCP端口
详见TCP协议https://en.wikipedia.org/wiki/Transmission_Control_Protocol但是TIME_WAIT是有时间窗口的,Linux默认是60秒.所以如 ...
- python + opencv: kalman 跟踪
之前博文中讲解过kalman滤波的原理和应用,这里用一个跟踪鼠标的例程来演示怎么在opencv里用自带的kalman函数进行目标跟踪,文章的内容对做图像跟踪有借鉴意义.文章主要是网络资源进行整理和简单 ...
- nginx反向代理压测问题记录
使用nginx反向代理压测web程序,100个用户并发时,每隔一段时间loadrunner工具中就会报错,报错信息如下: Continuing after Error -26610: HTTP Sta ...
- IE屏蔽鼠标右键、禁止复制粘贴等功能
<body oncontextmenu="return false" onselectstart="return false" ondragstart=& ...
- ffmpeg avformat_open_input返回失败的解决办法
用ffmpeg做的第一个程序,参考网上的代码,就出现了一些问题,其中avformat_open_input返回失败. 下面是我在网上收集到的失败信息的相关解决: /////////////////// ...
- Labview按钮的机械动作
LabVIEW 对于按钮控件的机械动作提供了六个不同的选择,它们可以通过右键按钮并选择机械动作来找到.这些不同的选项导致按钮输出的值的行为不同.下里将这六个选项做一个简短的总结: 单击时转换当用鼠标将 ...
- 【Java面试题】57 short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
Java规范有这样的规则 [ 1.高位转低位需要强制转换 2.低位转高位自动转. ] short s1 = 1; s1 = s1 + 1;有什么错? 答: i 是int 型 s1 short型 通 ...
- logging.xml file setfile(null,true) call failed
定义目录三个方法:一:${catalina.base}或${catalina.home}相对路径配置方法.catalina.home是你配置服务器时自动在环境变量中加的路径,默认是指向tomcat服务 ...
- Linux 快速删除大量小文件方法
进行以下两步操作即可: 1.第一步:创建空的文件夹: mkdir /tmp/blank 2.第二步:执行以下命令:rsync --delete-before -d /tmp/blank/ /home ...