益米主页总结(3)

2015-05-02

纪念我第一次用上了图片
第一次用上图片有点小激动。。
五一小长假又是在学校。
现在都是一个学期才回一次家了。

JS-main

其实重新去看自己写的JS，有好多地方可以改。
更悲催的是，发现JS基本都是用来实现动画效果的=。=

var commonAnimatefun = function(id, prevCls, addCls) {
	var ele = document.getElementById(id);
	if (ele.className.indexOf(prevCls) > -1) {
		return;
	};
	ele.className += addCls;
}

实现第一部分写的滚动触发JS然后给父元素添加动画类就是这个函数了。之前写的重复的太多，就封装成这个函数，当符合条件就触发。当然，为了避免多次添加类，函数内做一点判断。不过我更想是执行了一遍这个函数就取消执行，不要进入函数判断。
写这篇东西的时候自己看着JS好不爽，边写边重新重构代码了：

var EMITONG = {
	header: document.getElementById('module-fixhead'),
	slideNavBar: document.getElementById('slideNavBar'),
	timeline: document.getElementById('module-timeline'),
	team: document.getElementById('module-team'),
	map: document.getElementById('module-map'),
	headerNav: document.getElementById('windowScrollTo'),
	fixedTopShow: function(scrollTop) {
		commonAnimatefun('module-fixhead', 'animation', ' fixheader-animation');
		slideNavBar.style.display = "block";
		slideNavBarfun(scrollTop);
	},
	fixedTopHide: function() {
		this.header.className = "module-fixhead";
		slideNavBar.style.display = "none";
	},
	init: function() {
		commonAnimatefun('module-header', 'animation', ' header-animation');
		windowScrollTo();
		addBtn();
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		if (scrollTop > 0) {
			EMITONG.fixedTopShow(scrollTop);
		};
	}
}

其实就是把模块中的一些公用的元素都放到一起了，其实也不清楚这样是不是真的会更好。。

1
2
3

window.onload = function() {
	EMITONG.init();
}

然后原本长长的onload里面的函数就变成现在这一句了，看起来还蛮有逼格的哈哈哈。
重构代码（这应该算是了吧）中有个困惑就是不知道改写之后是不是还能实现原来的效果。。只能反复人肉测试，而且还不知道会不会有隐藏的BUG=。=
是不是要学一下单元测试了。
主要大改的就是这个地方了。

var slideNavBarfun = function(scrollTop) {
	var slideNavBar = EMITONG.slideNavBar;
	var menuele = EMITONG.headerNav.getElementsByTagName('a');
	for (var i = 0,
	max = menuele.length; i < max; i++) {
		if (menuele[i].className == "selected") {
			menuele[i].className = "";
			break;
		}
	};
	if (scrollTop < 582) {
		slideNavBar.style.left = "0";
		slideNavBar.style.width = "44px";
		menuele[0].className = "selected";
	} else if (scrollTop >= 582 && scrollTop < 2598) {
		slideNavBar.style.left = "57px";
		slideNavBar.style.width = "92px";
		menuele[1].className = "selected";
	} else if (scrollTop >= 2598 && scrollTop < 3512) {
		slideNavBar.style.left = "150px";
		slideNavBar.style.width = "92px";
		menuele[2].className = "selected";
	} else if (scrollTop >= 3512 && scrollTop < 5068) {
		slideNavBar.style.left = "243px";
		slideNavBar.style.width = "92px";
		menuele[3].className = "selected";
	} else if (scrollTop >= 5068) {
		slideNavBar.style.left = "338px";
		slideNavBar.style.width = "92px";
		menuele[4].className = "selected";
	}
}

不介意我放出这个自认为很蠢得函数吧。。
没错，我就是人肉确定到底什么时候滚动到目标！记录那个高度值然后改变底部那个浮动块的位置。。真的觉得好蠢，而且这样后期很不好修改，如果页面添加了元素改变了高度那就必须再动这里的数字了Orz。
让我再去参考其他人是怎么写的= =
然后自己感觉比较有趣的是这一段：

var onscrollTimer = null;
window.onscroll = function() {
	var TargetArray = null;
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	if (scrollTop > 0) {
		EMITONG.fixedTopShow(scrollTop);
	} else {
		EMITONG.fixedTopHide();
	}
	//函数节流
	if (onscrollTimer) {
		clearTimeout(onscrollTimer);
	}
	//当滚动到某个部分时执行函数
	onscrollTimer = setTimeout(function() {
		var clientHeight = document.documentElement.clientHeight;
		for (var key in TargetArray) {
			if (TargetArray[key] < 500 && TargetArray[key] > -500) {
				switch (key) {
				case 'timeline':
					{
						timelinefun();
						delete TargetArray.timeline;
						break;
					}
				case 'team':
					{
						teamfun();
						delete TargetArray.team;
						break;
					}
				case 'map':
					{
						commonAnimatefun("module-map", 'animation', ' map-animation');
						delete TargetArray.map;
						break;
					}
				}
			};
		}
	},
	100);
}

就是把当前需要动画的部分都包装成一个对象，里面存放着动画块和用户的距离，当达到范围（这里是-500到500px）时，判断是哪一个到达了，然后执行动画。不过这个会在浏览器滚动的时候触发，虽然用了节流函数但是还是感觉很不好，应该有更好的算法吧=。=

Biousco

未分类

益米主页总结(3)

JS-main