第二个礼拜。
开始尝试按照模板实现一些微公益首页的js效果。花了两天时间还原了一个滚动的照片栏。
记下其中的心得。
css中 1 position为static的时候,会忽视掉left等定位属性
2 absolute可以覆盖其他元素,按文档流的先后顺序决定谁在上面,当然可以修改某些属性实现手动控制。
html 由于新浪的分工比较清晰,js和builder分开,所以写js的时候尽量用自定义标签属性去查找标签,不要用id,避免和页面由于id的改变或者css的改变,导致js出意外效果,比如,新浪中习惯使用 node-type action-type
以及action-data
setTimeout嵌套重复定时器,清除的时候,清除里面的就可以了如
Id1=setTimeout(function(){id2=setTimout(doSomeThing,200)},200);
clearTimeout(id1)不管用,id2可以。
关于滚动照片栏的实现:
1 将n张照片横向排列在一个div中,div的宽度固定,overflow设为hidden。
2 照片作为li设置在ul中,清除默认li效果,排成一排,ul的宽度设为无限大,这样就可以横向排出n张照片。 3 向左滚动的实现,照片向左滚动,显然照片排列集体向右移动一张照片宽度就行了。先把照片组最后一张移到最前面,然后把他们整体左移一格,这样最后一张照片在显示区域的左边了,再释放动画效果,让他移到显示区域。
4 向右滚动的实现,几乎和向左滚动时候原理一样,不过可以先动画效果把整体向左移一格,这样可视区域就显示第二种,然后把当前第一张放到末尾处。
5 自动播放的实现就是一直向右滚动,设置时间定时器就可以了。
6 下脚标跳转到指定页,就是从点击的数字页开始,把它之后的每一页一直插到ul的最后一项,直到点击页处于显示区域。