原生JS 封装运动函数

页面导航:首页 > 网络编程 > JavaScript > 原生JS 封装运动函数

原生JS 封装运动函数

来源: 作者: 时间:2016-01-19 18:32 【

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶。

 

 

/*
- obj 指的是DOM对象
- json 指的是 CSS样式
- 例 startMove(oDiv,{width:100,height:100},function(){})
*/

function startMove(obj,json,fnEnd){
	clearInterval(obj.timer);	//先清除之前的定时器
	obj.timer = setInterval(function(){
		var bStop = true;	// 假设所有的值都到了
		for( var attr in json ){	//遍历json属性
			var cur = (attr == 'opacity') ? Math.round(parseFloat(getStyle(obj,attr))*100) : parseInt(getStyle(obj,attr)); //对opacity 特殊处理
			var speed = (json[attr] - cur)/6;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 	//speed 数字转化,防止不能到达目标的bug
			if( cur != json[attr]) bStop = false;	//如果没有达到目标值,则bStop设为false;
			if(attr == 'opacity'){
				obj.style.filter = 'alpha(opacity='+ (cur + speed) +')';
				obj.style.opacity = (cur + speed)/100;
			}else{
				obj.style[attr] = cur + speed + 'px';	
			}	
		}
		if(bStop){
			clearInterval(obj.timer);
			if(fnEnd) fnEnd();	 //执行回调函数
		}
	},30);
}

function getStyle(obj,name){
	return obj.currentStyle ? obj.currentStyle[name] : window.getComputedStyle(obj,null)[name];	//兼容性处理,注意getComputedStyle为只读属性
}

function getByClass(oParent,sClass){
	var aEle = oParent.getElementsByTagName('*');
	var aResult =[];
	var re = new RegExp('\b' + sClass + '\b','i');
	for(var i=0; iut="function(){" .onmouseover="function(){" .style.zindex="nowIndex++;" asmallpic.length="" else="" function="" i="0;" now="" onext.onclick="function(){" oprev.onclick="function(){" oslide.onmouseout="function(){" oslide.onmouseover="function(){" pre="" return="" this.index="=" timer="setInterval(onext.onclick,3000);" var="">

 

 

 

 

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<