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

时间:2020-01-09   访问量:68

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

网站动态效果.gif

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/72.html转载请注明出处


相关文章
详解js获取当前页面ur···

网站的搜索页如何利用JS写出动态的tile呢?首要的条件就是要获取当前页面的url的信息。下面大树就···

js数据类型转换

  Tostring  toString() 方法返回一个表示该对象的字符串。  每个对象都有一个t···

总结js常用的dom操作(···

  前言  很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常···



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