其中包括三种实现方式:javascript原生实现、jQuery实现、CSS3实现瀑布流的效果。随着滚动条滚动来实现图片的动态加载。
使用zepto.js中touch.js实现移动端的触屏事件;使用animate.css实现相册浏览时的动画效果
实现随着网页滚动条的滚动位置来切换侧边导航条tag;及点击侧边导航条tag实现页面跳转
通过CSS实现16点棋盘格,JS实现基本的逻辑功能,可兼容移动端和PC端
实现了鼠标悬停,点指定tag到指定图片,向左向右切换图片效果
由CSS3实现的动画效果:用到了box-shodaw阴影效果;绝对定位和z-index显示层级; transform中的rotate旋转角度、scale缩放倍数、skew扭曲元素;tansition实现动画。
其中用到的图标为使用Bootstrap中的图标,微博图片实现了查看大图的效果
用canvas实现的小球滚动效果,实现切换背景图片和停止滚动效果
由给定的PSD图实现的整站搭建,技术点有如下:
photoshop切图、CSS Sprite、CSS对合成图的position定位、用CSS实现圆角的背景图、图片无缝滚动等。
此网站兼容IE7及以上版本。支持firefox、chrome、safari、opera。