普通版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 ...
随机推荐
- Filder配置及使用教程
https://www.cnblogs.com/woaixuexi9999/p/9247705.html
- 【实战】使用 Kettle 工具将 mysql 数据增量导入到 MongoDB 中
最近有一个将 mysql 数据导入到 MongoDB 中的需求,打算使用 Kettle 工具实现.本文章记录了数据导入从0到1的过程,最终实现了每秒钟快速导入约 1200 条数据.一起来看吧~ 一.K ...
- java异步调用方法
一.利用多线程 直接new线程 Thread t = new Thread(){ @Override public void run() { longTimeMethod(); } }; 使用线程池 ...
- 创建dynamics CRM client-side (十) - 用JS来获取form type
用户可以用以下代码来获取 form type 更多的信息可以查阅https://docs.microsoft.com/en-us/powerapps/developer/model-driven-ap ...
- 响应国家号召,在家撸码之React迁移记
最近这段时间新型冠状病毒肆虐,上海确诊人数每天都在增加,人人提心吊胆,街上都没人了.为了响应国家号召,近期呆在家里撸码,着手将项目迁移到React中,项目比较朴素,是一张线索提交页面,包含表单.图片滚 ...
- shiro中ecache-core版本引起的异常
ecache-core包版本不对引起的错误,将2.5.3换成2.4.5就好了 来源 WARN [RMI TCP Connection(3)-127.0.0.1] - Exception encount ...
- vue简介,插值表达式,过滤器
目录 VUE框架介绍 what?什么是vue? why?为什么要学习vue? special特点? how如何使用? 下载安装? 导入方式? 挂在点el 插值表达式 delimiters自定义插值表达 ...
- Magicodes.IE 2.0发布
Magicodes.IE 2.0发布 Magicodes.IE是我们维护的开源的导入导出通用库,去年年底已加入NCC开源组织. Github地址:https://github.com/xin-lai/ ...
- OpenCV3入门(五)图像的阈值
1.图像阈值与二值化 阈值是一种简单的图像分割方法,一幅图像包括目标物体(前景).背景还有噪声,要想从数字图像中直接提取出目标物体,可以设定一个像素值即阈值,然后用图像的每一个像素点和阈值做比较,给出 ...
- 从免费的物联网防火墙hihttps谈机器学习之生成对抗规则
hihttps是一款基于MQTT的免费的物联网防火墙,同时也是web应用防火墙,既支持传统的检测功能如SQL注入.XSS.恶意漏洞扫描.密码暴力破解.CC.DDOS等),又支持无监督机器学习,自主对抗 ...