原生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的更多相关文章

  1. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  2. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  3. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  4. 原生javascript封装动画库

    ****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...

  5. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  6. 你可能不需要 jQuery!使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  7. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  8. 原生javascript加载运行

    原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...

  9. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

随机推荐

  1. MySQL 数据库通过日志恢复

    http://blog.csdn.net/hanxin1987216/article/details/5976856 要想从二进制日志恢复数据,你需要知道当前二进制日志文件的路径和文件名.一般可以从选 ...

  2. problems during rovio build

    1. rovio的readme中使用的是catkin build, ROS tutorial中用的是catkin_make. 关于build与make的区别: build重新编译所有文件:make默认 ...

  3. 搭建php环境哪家强

    http://www.bubuko.com/infodetail-791030.html

  4. Why many EEG researchers choose only midline electrodes for data analysis EEG分析为何多用中轴线电极

    Source: Research gate Stafford Michahial EEG is a very low frequency.. and literature will give us t ...

  5. 部署 DevStack - 每天5分钟玩转 OpenStack(17)

    本节按照以下步骤部署 DevStack 实验环境,包括控制节点和计算节点 创建虚拟机 按照物理资源需求创建 devstack-controller 和 devstak-compute 虚拟机 安装操作 ...

  6. laravel实现数据库多库配置,读写分离配置或者多读写分离配置

    'connections' => array( //默认mysql配置,访问test库 'mysql' => array( 'driver' => 'mysql', 'host' = ...

  7. Nfs+Drdb+Heartbeat 数据存储高可用服务架构方案

    一.方案的应用场景 适用于2千万-3千万PV架构的网站,Nfs数据存储高可用服务方案 备注:互联网排名前30左右公司常用的架构 二.生产环境方案部署原理图 三.生产环境服务器硬件配置: 生产环境中采用 ...

  8. oracle数据泵导入

    假设将dmp放到/data目录下,首先在数据库中创建directory目录SQL> create directory exp as '/data/'在操作系统命令执行导入命令.impdp sys ...

  9. JavaEE学习文章汇总-并发,集群,分布式

    以下文章来自博客 http://blog.csdn.net/FX_SKY/article/category/6203839 其中包括 集群Zookeeper 环境搭建 http://blog.csdn ...

  10. SQL 基础语法(一)

    SQL 语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如"客户"或者"订单").表包含带有数据的记录(行). 下面的例子是一个名为 & ...