完美运动框架(js)
一、前言
学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用。
二、代码封装重用
function startMove(obj, json, fnEnd){ clearInterval(obj.timer);//若物体之前开有定时器则先关闭 obj.timer = setInterval(function(){
var bStop = true; //假设所有的属性值运动到了目标值
for(var attr in json){//遍历物体传过来的json值
var start = 0;
if(attr === 'opacity'){//透明度
start = Math.round(parseFloat(getStyle(obj, attr))*100);
}else{//非透明度属性
start = parseInt(getStyle(obj, attr));
}
if(start != json[attr]){//若有属性值未运动到目标值,将bStop的值赋为false
bStop = false;
}
var speed = (json[attr] - start)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//速度为正值向上取整,速度为负值向下取整
if(attr === 'opacity'){
obj.style.filter = 'alpha(opacity:'+ (start + speed) +')';//IE浏览器
obj.style.opacity = (start + speed)/100;//非IE浏览器
}else{
obj.style[attr] = start + speed + 'px';
}
}
if(bStop){//所有的属性值都运动到了目标值,则关闭定时器并执行回调函数
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
}, 30);
} function getStyle(obj, attr){//获取当前属性的值
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}
三、测试并结果分析
将上面封装的代码保存为moveFrame.js文件,并导入如下测试代码中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title完美运动框架应用举例(满足多个属性值同时运动)</title>
<style type="text/css">
#one{width: 100px;height: 100px;background-color: red;filter:alpha(opacity:40);opacity: 0.4;}
</style>
<script type="text/javascript" src="moveFrame.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('one');
oBtn.onclick = function(){
startMove(oDiv, {'width' : 200, 'height' : 400, 'opacity' : 100}, function(){
alert('successful');
});
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="多属性值同时运动">
<div id="one"></div>
</body>
</html>
测试结果为:chrome、FF、IE6+、Opera、Safari结果都一致。
四、总结
不管做什么特效,如图片轮播、滑动门特效、淡入淡出等,凡与运动相关都可以直接引入此框架。
本人前端菜鸟,希望这篇文章能对大家有所启发,文中有误导大家的地方,希望大伙海涵并给予指正。如果您觉得文章对您有所帮助,您的留言和推荐将对我是莫大的鼓舞!
此文章发布在本人博客园Developer_chang,如需转载本文,请注明来源: http://www.cnblogs.com/changjianqiu/
完美运动框架(js)的更多相关文章
- JS完美运动框架
这套框架实现了多物体,任意值,链式运动,多值运动,基本满足常见的需求. /* 功能:完美运动框架,可以实现多物体,任意值,链式运动,多值运动 版本:V1.0 兼容性:Chrome,FF,IE8+ (o ...
- JS完美运动框架【利用了Json】
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JS 之完美运动框架
完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getE ...
- 【repost】JavaScript完美运动框架的进阶之旅
运动框架的实现思路 运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓 ...
- JavaScript “完美运动框架”
/* “完美运动框架”,所谓“完美”,就是可以实现多个参数,多个物体运动互不影响的一个运动函数move(). * 大致结构如下:运动框架 EXP: move(obj,{width:200,height ...
- 2015.8.2js-19(完美运动框架)
/*完美运动框架*/ //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity f ...
- Javascript 完美运动框架——逐行分析代码,让你轻松了解运动的原理
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...
- JS 之完美运动框架 如何同时改变元素多个属性?
正如改变一个属性的方法,可以使用已经写好的运动函数如move(obj,attr,target,fn);我们可能会想这样做, 调用两次运动函数,如同时改变宽和高,move(obj,'width',tar ...
- js 完美运动框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- CodeForces - 283E Cow Tennis Tournament
Discription Farmer John is hosting a tennis tournament with his n cows. Each cow has a skill level s ...
- 1.1(Spring学习笔记)Spring基础(BeanFactory、ApplicationContext 、依赖注入)
1.准备工作 下载Spring:http://repo.spring.io/libs-release-local/org/springframework/spring/ 选择需要下载的版本 ...
- Exercise01_11
public class Population{ public static void main(String[] args){ int sum,s; s=365*5*24*60*60; sum=31 ...
- Spring的Aop 注解配置
1,导包 2,准备目标对象 package com.songyan.anno; public interface UserService { void save(); void delete(); v ...
- freedom isn't free
财务自由(除去房和车) 第一阶段: 个人存款达到50万以上 第二阶段 个人存款100~200万 第三阶段 个人存款400万以上 第三阶段以上才能算实现了相对较好的财务自由!come on , boys ...
- android多线程-AsyncTask之工作原理深入解析(上)
关联文章: Android 多线程之HandlerThread 完全详解 Android 多线程之IntentService 完全详解 android多线程-AsyncTask之工作原理深入解析(上) ...
- hibernate CascadeType属性
CascadeType.PERSIST 只有A类新增时,会级联B对象新增.若B对象在数据库存(跟新)在则抛异常(让B变为持久态) : 级联保存,当调用了Persist() 方法,会级联保存相应的数据 ...
- JS断点调试
断点调试在这种场景下能发挥很大的作用.上手这个办法也利益于我以前玩VB编程时也习惯了IDE的单步/断点调试,一般的纯Web开发入门的程序员我没看到几个会用的.其实难度不大,只是他们不懂得主动去探索 首 ...
- maven项目用assembly打包可执行jar包
该方法只可打包非spring项目的可执行jar包,spring项目可参考:http://www.cnblogs.com/guazi/p/6789679.html 1.添加maven插件: <!- ...
- 大话JS神器之Promise
前段时间的工作中,由于项目要在前端实现存储,于是便使用了websql,而websql的API涉及到了很多的异步问题,如果采取回调函数的方式处理,代码不够优雅,而且不利于理解,于是便找到了Promise ...