任意值运动框架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 ...
随机推荐
- 每天进步一点点------Allegro 铺铜、内电层分割
一.Allegro 铺铜 1.建议初学者内电层用正片,因为这样就不用考虑flash焊盘,这时候所有的过孔和通孔该连内电层的就连到内电层,不该连的就不连.而如果用负片,那么如果做焊盘的时候如果没有做fl ...
- Bootstrap入门(1)简介
作者:赵盼盼 出处:https://www.cnblogs.com/zhaopanpan/ Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快 ...
- 一个实例 ---灵活使用jquery选择器实现input一个key,多个value 。 用ajax传递对象到后台控制器
标题可能不是很清晰,我们看实例: 简单来说就是需要实现sku的功能...一件商品可以有多个属性, 一个属性可以有多个值 . 最后以json格式存到数据库 难点一: 如何实现input输入框的弹性使用 ...
- 计算几何-Dot-Vector
This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 看了书,然后码 ...
- 虚拟机kali Linux 的网络配置
首先打开虚拟机中的kali 发现是没有办法连网的 然后我们将kaili关闭 然后打开 然后看黄色区域选择桥接模式然后重新启动即可 https://jingyan.baidu.com/article/7 ...
- js处理文章详情页点击量统计
具体需求:在文章管理系统中,需要统计文章详情页面的点击量,来体现该文章是否受用户欢迎,方便管理员调整日后编辑新文章时的内容方向. 解决方案:设置有过期时间的cookie 我们在访问文章详情页面时,拿到 ...
- LaTeX学习资源
LaTeX入门 Beamer教程文档 数学公式大全
- .Net Core 认证组件之Cookie认证组件解析源码
接着上文.Net Core 认证系统源码解析,Cookie认证算是常用的认证模式,但是目前主流都是前后端分离,有点鸡肋但是,不考虑移动端的站点或者纯管理后台网站可以使用这种认证方式.注意:基于浏览器且 ...
- N个数求和(PTA)
这题多输出了一个空格,卡了半天... leetcode刷多了,后遗症 这题可以用scanf("%lld/%lld"),直接读入,不过我用了stoll,也就是stoi,string ...
- 台电X16pro刷机记录
Android: 如果要刷安卓,需要使用win7系统电脑,且需要安装java环境,同时按住 音量减+电源键进入刷机模式(DNX BOOT MODE..),这时在PhoneFlashTool_5.3.2 ...