//获取样式
function getStyle(obj){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } var speed = 0;
var timer = null;
function StartMove(obj,attr,target){ clearInterval(timer);
timer = setInterval(function (){ var oDiv = document.getElementById(obj);
var iCur = parseInt(getStyle(oDiv,attr)); //弹性运动 + 摩擦
speed += (target - iCur) / 8;
speed *= 0.8; if(iCur >= target){
clearInterval(timer);
}else{
oDiv.style[attr] = iCur + speed + "px";
} document.title = speed; },30); }

普通版js运动框架的更多相关文章

  1. 带无缝滚动的轮播图(含JS运动框架)

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  2. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  3. js运动框架逐渐递进版

    运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...

  4. js 运动框架及实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js运动框架之掉落的扑克牌(重心、弹起效果)

    玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...

  6. js运动框架完成块的宽高透明度及颜色的渐变

    了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...

  7. js运动框架 step by step

    开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...

  8. JS运动框架的封装过程(一)

    给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...

  9. 完美的js运动框架

    //完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...

随机推荐

  1. 去除Linux中的^M

    (1)安装tofrodos sudo apt-get install tofrodos (2)做一些优化 ln -s /usr/bin/todos /usr/bin/unix2dos ln -s /u ...

  2. 修改 Apache 的默认端口

    修改 Apache 的默认端口修改 Apache 端口的方法是最妥协的方法了,后果是当你开启 Apache 服务器的时候,访问的本机地址将会附带端口号,比如 http://localhost:8888 ...

  3. Linux系统搭建私有CA证书服务器

    一.CA简介 CA是什么?CA是Certificate Authority的简写,从字面意思翻译过来是凭证管理中心,认证授权.它有点类似我们生活中的身份证颁发机构,这里的CA就相当于生活中颁发身份证的 ...

  4. C++中虚析构的作用

    为了当用一个基类的指针删除一个派生类的对象时,派生类的析构函数会被调用. 基本概念: 析构函数是用来回收对象的: 虚析构函数是析构函数的一种: 基类是一类对象共有属性的抽象.比如,猫和狗都是动物,都会 ...

  5. c#数字图像处理(十二)图像的腐蚀与膨胀

    背景知识 腐蚀与膨胀基本原理:就是用一个特定的结构元素来与待处理图像按像素做逻辑操作:可以理解成拿一个带孔的网格板(结构元素矩阵中元素为1的为孔)盖住图像的某一部分,然后按照各种不同的观察方式来确定操 ...

  6. 大事务造成的延迟(从binlog入手分析)

    log_event.cc 入口: int Query_log_event::do_apply_event(Relay_log_info const *rli,const char *query_arg ...

  7. rabbitmq使用总结

    rabbitmq 架构图 RabbitMQ 中的 broker 是指什么?cluster 又是指什么 broker 是指一个或多个 erlang node 的逻辑分组,且 node 上运行着 Rabb ...

  8. 剑指offer--二维数组中查找

    剑指offer--二维数组中查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序, 每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组 ...

  9. 牛客网在线编程_有序矩阵中第K小的元素

    Leetcode378原题,所以一样没有数据范围...( log(max-min)二分答案,然后NlogN二分每一行求出小于答案的元素个数,为了保证二分的答案在矩阵中,二分写的要和平常不太一样,最后输 ...

  10. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...