这周开始接收一些真正的业务了。都是些简单的业务逻辑。
1 返回顶部的按钮,这个实现上没什么难度,主要就是要判断滚动scrollTop的高度开始显示返回顶部的按钮,然后点击按钮触发scrollTop=0的事件,要注意的就是控制返回顶部按钮一直跟随的话,chrome可以用fixed绝对定位,而ie6只能用每一次scroll事件来计算距离顶部的高度,用scrollTop+之前的定位高度。
2 点击某个div让另外一个div消失。这个很简单,没什么好说的。
3 瀑布流懒加载,想让不同长短的图片加载出来后保证不出现太大的差别,用每一次加载都判断的方法,就是用ajax请求出一张照片,在几栏瀑布中找出最短的瀑布,然后放在他上面,每加载完一张,就判断一次,这样可以保证每次都是从最短的加载,保证不会出现太大的图片高度差距。这里遇到过一个bug就是,注意加载下一张的时候一定要注意保证上一张加载完成了,以后处理图片事件的时候也是,特别是这次需要计算高度,一定要图片加载完了再计算,所以,我把判断事件写在了图片的onload事件里面,每加载一张,判断出最短的,补上照片,再将onload绑在新加载的照片上,如此循环。
4 关于照片墙:实现原理,两个数组,一个数组放置当前所有页面上显示的图片源地址,另外一个数组放置备用图片,每次从第一个数组中随机选择3个地址,取出并放置在数组2的尾部,数组2的前3张去补充换下来的地方,至于动画效果,两种,第一种是从页面上选出来的图片位置撤下(随机方向撤走),撤完销毁那个节点,在那个位置插入新的图片节点,地址规则如上所示。第二种是随机方向传进一张图片,并把被掩盖的图片销毁。
这里面注意,在文档流中,后面的的优先显示,也就是说,想要飞进效果的时候,需要插入一个新img节点在要替换节点后面,其动画效果会慢慢遮盖前面的节点,而撤出的时候,需要把撤出节点放在插入节点前面,这样撤出的效果才会掩盖后面的节点。
几个发现的问题:1 在嵌套<div id=1><div id=2><img id=3/></div></div>这种结构中,1.firstNode和1.lastNode会是一个文档节点,这是自动加入的,在chrome下测试过,虽然2.firstNode不会出现这种问题,就是2.firstNode能取到img,但是使用STK(insertHTML,‘afterend’)之后,往往有可能会带入一个空的文档节点。总之,以后用firest和last取节点的时候一定要记得判断,可以用如下函数:
elementChild: function(dom,str){
var result;
switch(str){
case 'firstChild':
if (dom.firstElementChild) {result = dom.firstElementChild;}
else{result=dom.firstChild;while(result&&(result.nodeType!=1)){result=result.nextSibling;}}
break;
case 'lastChild' :
if (dom.lastElementChild) {result = dom.lastElementChild;}
else{result=dom.lastChild;while(result&&(result.nodeType!=1)){result=result.previousSibling;}}
break;
}
return result;
。
5 在ie中被虐的经历:开始时显示就出了问题,尝试之后发现,ie8只能显示32位深的png格式,不能显示24位的png格式,好 ,我把所有图片改成jpg格式之后,ie8只能显示24位的jpg,32的又不能显示了,能死么!!!傻逼ie。以后要注意了。
6 还是ie,其实赖我自己不注意,构图的时候给img节点都加了关闭标签 如
<img></img>刚开始在chrome调试的完全没问题,后来发现在ie上各种蛋疼,我勒个去,后面发现,ie给这种情况自动把</img>解析成了一个节点!所以我在节点列表中找到<img>的下一个节点是</img>这尼玛是什么,以后宁愿不加闭合也不能瞎加闭合啊~~~~,我估计<img>,<input>,<meta>都如此,以后记住了。
7 给链接等添加click事件的时候,一定要先把默认事件去除了!!!!!!!