原生javascript 实现 animate
原生javascript 实现 animate
//animate
function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startrun(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = 0;
if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}
var speed = (target-cur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == target){
clearInterval(obj.timer);
if(fn){
fn();
}
}else{
if(attr == "opacity"){
obj.style.filter = "alpha(opacity="+(cur+speed)+")";
obj.style.opacity = (cur+speed)/100;
}else{
obj.style[attr] = cur + speed + "px";
}
}
},30)
}
原生javascript 实现 animate的更多相关文章
- 原生JavaScript运动功能系列(五):定时定点运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...
- 原生JavaScript运动功能系列(四):多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- 原生 JavaScript 代替 jQuery【转】
目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...
- 原生javascript封装动画库
****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- 原生javascript加载运行
原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
随机推荐
- jQuery解决iframe高度自适应代码
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...
- Sql基础
SELECT 列名称 FROM 表名称 SELECT * FROM 表名称 SELECT DISTINCT Company FROM Orders 去重 SELECT 列名称 FROM 表名称 WHE ...
- [Hadoop in Action] 第2章 初识Hadoop
Hadoop的结构组成 安装Hadoop及其3种工作模式:单机.伪分布和全分布 用于监控Hadoop安装的Web工具 1.Hadoop的构造模块 (1)NameNode(名字节点) ...
- tftp-nfs开发环境搭建
嵌入式开发通常使用主机-开发板的开发模式,在裸板开发中,我们通常使用串口调试工具传递文件,比如windows平台的超级终端,SecuCRT以及Linux平台的ckermit(题外话:ckermit比w ...
- 添加WoSign根证书到JDK
由于某些“众所周知”的原因,Azure中国版使用了国内的WoSign证书——和臭名昭著的CNNIC有的一拼.Apple是不信任WoSign证书的,这也是为什么用Mac OS中访问www.azure.c ...
- [Network Analysis] 复杂网络分析总结
在我们的现实生活中,许多复杂系统都可以建模成一种复杂网络进行分析,比如常见的电力网络.航空网络.交通网络.计算机网络以及社交网络等等.复杂网络不仅是一种数据的表现形式,它同样也是一种科学研究的手段.复 ...
- 20145222《信息安全系统设计基础》Linux常用命令汇总
学习Linux时常用命令汇总 通过Ctrl+f键可在该网页搜索到你想要的命令. Linux中命令格式为:command [options] [arguments] //中括号代表是可选的,即有些命令不 ...
- 如何在HoloLens中创建一个2D的Hello World程序
注:本文提及到的代码示例下载地址 > How to build an "Hello World" 2D app in HololLens. HoloLens 是微软的一款MR ...
- Mysql查询——学习阶段
1.开篇 搞开发的都知道,当数据量很大的时候,我们的代码逻辑的简单性就显得十分重要,否则处理起来就需要花费相当多的时间.另外还有一个地方需要注意的是我们写的sql语句. 一个拥有多年开发的资深开发者可 ...
- C# 提交网页请求时出现如下错误: System.Net.WebException: 操作超时
原因一: 连接超时时间 Timeout 以及写入Post数据超时时间 ReadWriteTimeout 设置得太短,一般要设置大于6000ms. 原因二: Expect100Continue 属性的值 ...