完美JS缓冲运动函数,让你的网站动感十足

作者:admin   时间:2020-07-09   访问量:111

  网站上很多绚丽的动态效果,大部分都是使用JS控制了元素属性的变化,比如说width、height、left、top甚至opacity。今天大树给大家分享一个万能的JS缓冲运动模板,你只需要套用,就能立马让你的网站动感十足。

function doMove(obj, json, endFn) {
	clearInterval(obj.timer);

	obj.timer = setInterval(function() {
		var bestop=true;
		for(attr in json){			
			//取当前值
			var curr = 0;
			if (attr == 'opacity') {
				if(json[attr]<2)json[attr]=json[attr]*100;
				curr = parseInt(parseFloat(igetStyle(obj, attr)) * 100);
			} else {
				curr = parseInt(igetStyle(obj, attr));
			}			
			//计算速度
			var speed = (json[attr] - curr) / 8;
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);			
			//开始赋值
			if (attr == 'opacity') {
				obj.style[attr] = (curr + speed) / 100;
			} else {
				obj.style[attr] = curr + speed + 'px';
			}			
			//检测停止			
			if(curr!=json[attr])bestop=false;
		}
		//执行停止
		if (bestop) {
			clearInterval(obj.timer);
			endFn && endFn();
		}
	}, 30)

	function igetStyle(obj, attr) {
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
}

  请注意,json这个变量要按照json的格式来赋值,例如:doMove(oDiv,{width:300,height:300,opacity:0.3},function(){alert(1)})


【地址】:http://www.inseo.cn/seo/47.html转载请注明出处


相关文章

Copyright © 2018-2030 大树SEO All Rights Reserved.