//获取样式
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. Irrelevant Elements UVA-1635 (二项式定理)

    vjudge链接 原题链接 乍一看似乎没什么思路,但是写几个简单的例子之后规律就变得很明显. 比如当 n=5 时,每一步计算后的结果如下: a1 a1+a2 a1+2a2+a3 a1+3a2+3a3+ ...

  2. qsort 函数笔记

    函数声明 void qsort(void *base, size_t nitems, size_t size, int (*compare)(const void *, const void*)); ...

  3. DFS(深度优先搜索遍历有向图)-03-有向图-太平洋大西洋水流问题

    给定一个 m x n 的非负整数矩阵来表示一片大陆上各个单元格的高度.“太平洋”处于大陆的左边界和上边界,而“大西洋”处于大陆的右边界和下边界. 规定水流只能按照上.下.左.右四个方向流动,且只能从高 ...

  4. sqlserver 分页模糊查询

       积少成多 ----  仅以此致敬和我一样在慢慢前进的人儿 问题: 在sqlserver 进行模糊查询,出现问题 最初使用“concat”,进行拼串操作,如下所示: <select id = ...

  5. 不停机替换线上代码? 你没听错,Arthas它能做到

    写在前边 有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工 ...

  6. SVN : 在SVN检测下来的Maven项目没有Maven标志

    在Ecplise使用import->从SVN检出项目, 检出的项目没有了 Maven标志 解决方案 右键点击项目->configure->Convert to Maven Proje ...

  7. Dubbo(二):深入理解Dubbo的服务发现SPI机制

    一.前言 用到微服务就不得不来谈谈服务发现的话题.通俗的来说,就是在提供服务方把服务注册到注册中心,并且告诉服务消费方现在已经存在了这个服务.那么里面的细节到底是怎么通过代码实现的呢,现在我们来看看D ...

  8. 创建一个圆类Circle的对象,分别设置圆的半径计算并分别显示圆半径、圆面积、圆周长。

    编写一个圆类Circle,该类拥有: ①一个成员变量 Radius(私有,浮点型): // 存放圆的半径: ②两个构造方法 Circle( ) // 将半径设为0 Circle(double r ) ...

  9. TortoiseSVN的安装及其简单使用

    VisualSVN-Server的安装以及简单使用 TortoiseSVN的安装及其简单使用 VisualSVN的安装及冲突的处理 安装完VisualSVN-Server后,Test仓储里边什么都没有 ...

  10. 9. Palindrome Number QuestionEditorial Solution

    Determine whether an integer is a palindrome. Do this without extra space. click to show spoilers. S ...