本来是逛淘宝双11活动页面,想看下有没宝贝淘下的,拖动页面浏览商品时就注意到了页面上两侧导航的缩放展示效果,看完页面上的商品展示,没关页面,直接跑去查看人家有代码实现了。真心怀疑是不是前端都有这毛病啊,没事总喜欢折腾下。做为一名前端,真心伤不起啊......
效果描述:
默认不显示两侧浮动导航,当页面滚动到一定位置时,两侧的导航内容以缩放显示的效果展示出来,当往上拖动滚动条至该位置临界点时两侧导航再以缩放显示的效果逐渐淡出显示!
实现思路:
2侧导航用postion:fixed定位,并默认visibility: hidden;当拖动滚动条至临界点位置时重新设置visibility: visible ,并用 css3 的transform 和 transition属性去实现缩放显示的效果。
关键代码是js根据滚动值去增删相应的class,以及相应class的transform 和 transition属性定义。
完整源码如下:
提示:你可以先修改部分代码再运行。
点击上面的运行按钮,在新打开的代码效果演示页面中拖动下页面滚动条,不出意外,就能看到展示效果啦! enjoy...
上一篇: 主域页面发起ajax请求获取二级域名页面内容
下一篇: 什么叫CallBack函数,怎么用回调函数?
6条评论( 网友:3 条,站长:3 条 ) 网友评论{有您的评论更精彩....}