标签：
今天被顶顶大人叫去客户公司驻场，之前一直忙着重新做公司的官网，有个地方又卡了大半天。大boss的要求是在页面的某处实现一个动画效果，有三张图片从下方依次出现。如何从下方“冒”上来呢？即实现以下效果
1.首先要将三张图片进行绝对定位，将父元素设为相对定位。并将bottom都设置为图片高度的负数，并将父元素的overflow属性设为hidden。而每张图片的left值根据所需重叠的长度，确定咯。值得一说的是啊，为了让中间的图片显示在最上方，应该对它设置一个较高的z-index的值哦。
2.而让它们显示在父元素中，就是将他们bottom都设为0啦(z这里设三个新的class，定义新的bottom值)。为了实现动画效果，可在新的class中设置transition属性，在该属性中定义所要过渡变化的元素属性，及过渡时间。
3.最后一步就是写js了。在这儿之前，一直在考虑要用什么来触发该事件，最开始我用的是mouseover函数，当鼠标滑过父元素时，图片会依次显示。但是被顶顶大人否了，他让我改成当滚动条到一定高度的时候，再出现图片动画效果。为了实现这个，首先，要获取父元素到body顶部的距离，再然后是获取当前滚动条顶部到页面顶部的高度。当他们相等，或者后者大于等于前者时，为三个图片添加设置好的新样式（addClass）.
关键的语句：
var mydiv=$(".div7");//div7是父元素
var myheight=mydiv.offset().top;
var myscroll=$(document).scrollTop();
if(myscroll=myheight){}
这就告一段落啦，不管怎样，总算学了些东西。不过scrolltop，offset等等这些还是让我头疼。希望后来学习可以越来越好。
写完才发现，文不对题，居中半个字没提。好吧说道居中，其实我也很头疼，目前比较会用的就是，对p标签设置行高与高度相等，实现垂直居中。对块级元素设置具体的长宽，用margin：auto;实现水平居中。好吧还有就是将一些元素进行转换，比如讲父元素display为table啦，然后将子元素设置为display：table-cell；然后就可以用vertical-align（middle）或者text-align（center）哦。
标签：
原文地址：http://www.cnblogs.com/Hollyhouse/p/5410673.html
