任意值运动框架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 ...
随机推荐
- 【做题笔记】洛谷P1955[NOI2015]程序自动分析
第一道蓝题祭- 注意到本题中判断的是下标,即,并不是真的判断 \(i\) 是否等于 \(j\) 显然考虑并查集,把所有标记为"相等"的数放在一个集合里,然后最后扫一遍每个数,如果有 ...
- C语言使用信号量机制实例:
C语言使用信号量机制实例: #include <signal.h> #include <unistd.h> #include <stdio.h> #include ...
- 题解 P5530 [BalticOI 2002]双调路径
P5530 [BalticOI 2002]双调路径 输入样例: 4 5 1 4 2 1 2 1 3 4 3 1 2 3 1 2 3 1 1 4 2 4 2 4 样例如下图 样例说明: 从1到4有4条路 ...
- python如何将自己写的代码打包供他人使用
背景: 利用setuptools来实现,所以先安装setuptools,其实Python2.7.9及之后的版本都自带安装setuptools了,无需在另外安装 如果没有安装setuptools的直接下 ...
- Java compareTo的用法
compareTo() 方法用于将 Number 对象与方法的参数进行比较.可用于比较 Byte, Long, Integer等. 该方法用于两个相同数据类型的比较,两个不同类型的数据不能用此方法来比 ...
- Mysql sql语句技巧与优化
一.常见sql技巧 1.正则表达式的使用 2.巧用RAND()提取随机行 mysql数据库中有一个随机函数rand()是获取一个0-1之间的数,利用这个函数和order by一起能够吧数据随机排序, ...
- Homebrew安装和Mac使用
软件安装 1.Homebrew安装 ruby环境: curl -sSL https://get.rvm.io | bash -s stable 官网方式: /usr/bin/ruby -e & ...
- InkWell容器 和 官方自带日期组件 和第三方 日期格式转换组件
带点击事件的容器 InkWell( child: Text('时间'), onTap: _showTimePicker,), Flutter 日期和时间戳 日期转化成时间戳: var now = ...
- 脚手架搭建的react中使用bootstrap
1.在react的index.html文件中加个jQuery的引入 <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.mi ...
- Linux下mysql使用systemctl restart mysqld命令失败
Linux下mysql使用systemctl restart mysqld命令失败: 解决方法:将mysql赋予root的权限 vim /etc/passwd 找到mysql开头的一行文件mysql: ...