1.获取物体的绝对位置
//json里面存了两个数据，调用时直接getPos(obj).left或者getPos(obj).top
//获取绝对位置
function getPos(obj){
var l=0;
var t=0;
while(obj){
//obj 对象只要成立，就说明还有定位父级。 这种情况下变量l和t就会一直加等于当前对象到定位父级的top或left值。 一直加到没有定位父级为止，此时while循环自然就停止了。 return出的值也就是最后的绝对距离。
l+=obj.offsetLeft;//物体的左边距(到有定位父级的一个左边距)
t+=obj.offsetTop;//物体的上边距(到有定位父级的一个左边距)
obj=obj.offsetParent;//定位上的父级
}
return {left:l,top:t}
}
2.获取物体的非行间样式
/*
* @desc 获取非行间样式
* @parmas Object
* @parmas String
* @return String
*/
function getStyle(obj,name) {
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
3.运动框架
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else {
return getComputedStyle(obj,false)[name];
}
}
//传参的obj就是变量对象（类似oDiv）
//json就是一个json
//options也是json
function startMove(obj,json,options){
//timer前一定要加obj，因为timer需要重用，不止关一次。 如果不加obj定时器就关不了；就得出事了。
clearInterval(obj.timer);//一定要加obj。
options=options || {};//默认值（如果没有就执行后面的所以是空josn）
//因为是未定义的，所以未定义等于未定义还是未定义。 就会默认执行 || 后面的东西
options.duration=options.duration || 300;//默认值（同上）
options.easing=options.easing || 'ease-in';//默认值（同上）
//总次数，必须是整数
var cont=Math.floor(options.duration/30);//30毫秒（定死的数）
var start={};//空josn
var dis={};//空josn
for(var name in json){//循环josn
start[name]=parseFloat(getStyle(obj,name));//物体的原始信
if(isNaN(start[name])){//详细条件
switch (name){
case 'left':
start[name]=obj.offsetLeft;
break;
case 'top':
start[name]=obj.offsetTop;
break;
case 'width':
start[name]=obj.offsetWidth;
break;
case 'height':
start[name]=obj.offsetHeight;
break;
case 'marginLeft':
start[name]=0;
break;
case 'marginTop':
start[name]=0;
break;
case 'fontSize':
start[name]=12;
break;
//.......
}
}
//json[name]设置的运动多少的值
//start[name]物体本来的位置，高度或者透明度等等；
dis[name]=json[name]-start[name];//运动了多远
//dis[name] 运动了多少。 下面for in 循环里面需要用到
}
var n=0;//存一个变量
obj.timer=setInterval(function(){
n++;//让变量不断的加
for(var name in json){//循环josn
switch(options.easing){
case 'linear'://匀速
//下面两个变量就是（var cur=start+n*dis/cont;//现在哪儿）拆开的样子。 位子可以不分（var cur=start+dis*n/cont;）然后n/cont就可以提取上去了
var a=n/cont;
var cur=start[name]+dis[name]*a;
break;
case 'ease-in'://加速度（先慢后快）
var a=n/cont;
var cur=start[name]+dis[name]*a*a*a;
break;
case 'ease-out'://缓冲（先快后慢）
var a=1-n/cont;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
}
if(name=='opacity'){//因为opacity不带px。所以必须把它判断出来
obj.style.opacity=cur;
obj.style.filter='opacity('+cur*100+')';//处理兼容
}else {
//obj.style[name]为宽度时就是obj.style.width
//cur就是上面计算运动后的位子，高度或者透明度
obj.style[name]=cur+'px';//最终给属性赋值
}
}
if(n==cont){
clearInterval(obj.timer);//关定时器
//这是三传参最后一个。 josn名为options内存的一个函数
//调用格式为complete:function(){aleat（1）} complete必须写在前面
options.complete && options.complete();
}
},30);
}
4.找有没有重复的数
function findInArr(itme,arr){
for(var i=0; i<arr.length; i++){
if(arr[i]==itme){
return true;
}
}
return false; //给不给返回值都可以。 不给返回值默认undefined（都为假）
}
5.事件绑定
//事件绑定
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
//兼容ie9+ FF Chrome
obj.addEventListener(sEv,fn,false);
}else{
//兼容IE系
obj.attachEvent('on'+sEv,fn);
}
}
//事件解绑
function removeEvent(obj,sEv,fn){
if(obj.removeEventListener){
//兼容ie9+ FF Chrome
obj.removeEventListener(sEv,fn,false);
}else{
//兼容IE系
obj.detachEvent('on'+sEv,fn);
}
}
6.事件绑定
/*
* @desc 获取非行间样式
* @parmas Object
* @parmas String
* @return Object
*/
//处理getElementsByClassName不兼容问题的函数
function getByClass(obj,sClass){//obj代指在谁下面获取
if(obj.getElementsByClassName){//判断是否是高级浏览器
return obj.getElementsByClassName(sClass);
}else{
//*获取所有标签
var oGet=obj.getElementsByTagName('*');
var arr=[];
for(var i=0; i<oGet.length; i++){
//把每个calss切成一个个的字符串
var aClass=oGet[i].className.split(' ');
//找是否出现过，
if(findInArr(sClass,aClass)){
arr.push(oGet[i]);
}
}
return arr;
}
}
网友评论