普通版js运动框架
//获取样式
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运动框架的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
随机推荐
- git 多人协同开发
一.允许他人操作程序(两种方式) 1.添加合作者 2.创建组织 二.分支 每个开发者创建一个属于他们的dev分支 三.合并规则 1.一起合并(代码会出现冲突) 2.尽量缩短合并的周期
- lisp学习总结(一)
lisp太简单 lisp核心太简单了只有几个简单的逻辑定理,简单到你会认为他啥事都做不了. lisp语法太简单了,只有符号,参数,以及括号,组成一种万能的表达式. 由于上述lisp的简单,所以对于初学 ...
- JS实现 JSON扁平数据转换树状数据
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name: '', level: 0}, {id:2 , parentId: 0, name: '', level: 0}, ...
- JS-04-流程控制和循环
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- larabel Artisan Command 使用总结
larabel Artisan Command 使用总结 定义命令 在routes/console.php下定义命令 Artisan::command('ltf', function () { (ne ...
- redis--->字符串和哈希对比
redis 的字符串和哈希对比 相同点和不同点 相同点: 首先是他们有很多效果类似的命令,比如set和hset,mset和hmset等等 大多数情况下使用字符串存储的场景使用hash也可以实现. 不同 ...
- Shoot the Bullet(有源汇带上下界最大流)
有源汇带上下界最大流 在原图基础上连一条汇点到源点流量为inf的边,将有源汇网络流转化为无源汇网络流用相同方法判断是否满流,如果满流再跑一边源点到汇点的最大流就是答案 例题:Shoot the Bul ...
- nmap详解之原理与用法
前言 nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称.Nmap最初是由 ...
- SpringBoot + Mybatis 和ssm 使用数据库的区别
积少成多 ---- 仅以此致敬和我一样在慢慢前进的人儿 相关内容: https://www.cnblogs.com/h-c-g/p/10252121.html 引 言 接触SpringBoot 后, ...
- ros之发布者和订阅者协同工作
前面的例子显示了单个发布者/单个订阅者的情况,但是一个节点也可以同时是一个发布者和订阅者,或者拥有多个订阅和发布. 实际上,ROS节点最常做的事情是传递消息,并在消息上进行运算. 例doubler.p ...