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

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

  网站上很多绚丽的动态效果,大部分都是使用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转载请注明出处


相关文章
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:

switch-case基本用法与注意事项

switch-case 一般的用它来做值匹配的。switch-case其实也是可以做范围匹配的。 但是不推荐。

总结js常用的dom操作(js的dom操作API)

本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统。不能说是API,今天来系统总结一下!

js数据类型转换

js里的数据类型转换 1、类型转换 转换为字符串 - String(x)- x.toString(x, 10)- x+'' 转换为数字 - Number(x)- parseInt(x, 10) - parseFloat(x)...

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