//获取样式
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. 如何查看Ubuntu服务器上Django项目的MySQL服务有没有挂?

    如果你在项目内输入:MySQL -uroot -p 接着输入密码之后返回ERROR:1045……如下图 那么这就说明MySQL服务挂了. 需要重新启动一下 重启时在项目目录下输入:sudo servi ...

  2. EditPlus 添加 打开文件所在文件夹 功能

    添加自定义工具: Tools -> Configure User Tools... -> Add Tool >> Menu Text: 打开所在的文件夹 Command: ex ...

  3. SSM前后端分离/不分离对比Demo

    之前某些原因,整理了一个小的Demo,用于演示.个人认为在SSM前后端不分离的基础上在前端处理上比较麻烦一点之后就是注解的使用.总结一些对比,仅是自己掌握的,不够严谨,不足之处请大佬批评指正. 路由控 ...

  4. js---描述链表

    js描述链表 有些情况下js的数组结构在实际使用中速度很慢,此时可以考虑用链表来代替它: //链表类 function Node(element){ this.element=element; thi ...

  5. 笔记常用Linux命令(三) 查看服务器日志

    服务器日志 用于记录服务器的运行情况 查看服务器日志 tail:查看后面几行 n 显示行数 f 持续侦测后面的内容,查看服务器日志常用 查看最新的服务日志(静态) 命令格式:tail -n 行数 日志 ...

  6. hadoop3.2.0集群搭建的一些坑!

    搭建步骤就不多说了,网上教程很多,这里列举几个: https://blog.csdn.net/pucao_cug/article/details/71698903   2.8版本 https://ww ...

  7. CVE-2020-3110、CVE-2020-3111、CVE-2020 -3118、CVE-2020-3119、CVE-2020-3120 cdpwn 解析

    CVE-2020-3110.CVE-2020-3111.CVE-2020 -3118.CVE-2020-3119.CVE-2020-3120 cdpwn 解析 攻击条件 在同一广播域,黑客即可通过cd ...

  8. 使用信号管理nginx的父子进程

    master进程 通过CHLD监控worker进程,worker异常退出,通过CHLD信号拉起worker进程. 接收信号 TERM,INT信号表示立刻停止worker进程 QUIT信号表示优雅的停止 ...

  9. ipwry源码

    qqwry.ipwry都是cnss(http://blog.csdn.net/cnss/article/details/136069)出品,终于找到了源码,下载地址:http://download.c ...

  10. SpringMVC基础(二)_文件上传、异常处理、拦截器

    实现文件上传 实现文件上传,需要借助以下两个第三方 jar 包对上传的二进制文件进行解析: commons-fileupload commons-io form表单的 enctype 取值必须为:mu ...