任意值运动框架Move模块 js
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cur = 0; //parseInt(getStyle(obj, attr));
if (attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
}
else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur == iTarget) {
clearInterval(obj.timer);
}
else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';//IE使用
obj.style.opacity = (cur + speed) / 100;//chrome和FF使用
}
else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
任意值运动框架Move模块 js的更多相关文章
- 无限循环轮播图之运动框架(原生JS)
封装运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ retu ...
- JS之链式运动,及任意值运动框架,包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- JavaScript的运动框架学习总结
一.目录 1. 入门案例——实现匀速运动 2. 入门案例——实现缓冲运动 3. 实现任意值的运动框架v.1 4. 改进任意值的运动框架v.2 5. 改进任意值的运动框架v.3 6. 实现链式运动框架 ...
- JS运动学习笔记 -- 任意值的运动框架(高/宽度,背景颜色,文本内容,透明度等)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
随机推荐
- testng如何实现用例间依赖
todo: 参考: https://www.cnblogs.com/znicy/p/6534893.html
- java中的try-catch-finally中的return的执行顺序
在这里看到了try catch finally块中含有return语句时程序执行的几种情况,但其实总结的并不全,而且分析的比较含糊.但有一点是可以肯定的,finally块中的内容会先于try中的ret ...
- Ugly Number Gym - 101875B (最小表示法)
题意:给你一串长度为n的数,这个数可以将后面的数挪到前面来,如果没有小于最开始的那个数的话就输出YES,否则输出NO 题解:如果后面有数字小于第一个数的话就肯定是NO了,这题的坑点就是如果前面很长一串 ...
- Refusing to install package with name "webpack" under a package
最近学习webpack 知识时 下载依赖结果报了这个错 查阅资料后发现是 这个name 不能使用所需要安装包的名字! 换为其他之后 再次操作命令 就没问题了
- Spring - 周边设施 - H2 数据库启动时写入数据
1. 概述 之前讲到了 H2 的引入 这下我想说说 H2 启动时的 数据导入 2. 场景 需求 启动项目后, H2 启动起来 环境数据会自动注入 H2 数据库 可以验证是否成功 3. 环境 os wi ...
- Linux中Oracle启动侦听报错TNS:permission denied的解决方法
最近在开发环境 oracle 启动侦听的时候,出现了 TNS:permission denied 的问题,通过网上和咨询朋友,最终找到了解决方案,现在共享出来给有需要的朋友. [oracle@orac ...
- CentOS7重启和关机
重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户使用) 4.shutdown -r 2 ...
- 解决linux乱码问题
echo "LANG="zh_CN.UTF-8" >> /etc/sysconfig/i18n yum -y install kde-l10n-Chinese ...
- 从csv文件里取数据作为请求参数,和把返回数据放到一个csv文件
本来想把登陆后的token放到数组里,下一个参数用,但是貌似不支持数组,暂时先这样用了,并不麻烦,还很方便. 1.添加线程组等必要的东东后,添加csv配置器 2.进行设置 说明:csv文件设置不能读取 ...
- 移动端 vue + mintUI 实现头部页签切换,按需加载~
记录~记录~~有时候,我们会遇到一个页面有两个页签切换需求,但是为了避免同时加载两个页面,我们要做到的就是当前进入的是那个页面,就先加载哪一个页面,并且也不会造成浏览器地址的变化.一开始我使用的方法是 ...