`
yiminghe
  • 浏览: 1471551 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

初探淘宝查询的方便功能

阅读更多

上了一下淘宝查询商品界面,发现了一个很方便的功能,分析一下哦


初始界面:

 

 

 

下拖滚动条时:

 

 

 

 

可见一些便捷的过滤条件会始终保留在页面顶部,很实用,很方便。



用ie6 , firefox3.5 ,chrome2看了下,taobao很大胆的忽略了ie6,确实是国内web开发所少见的,想起了曾经看过的 关于经济舱与vip舱 的比喻,没想到taobao真的这么做了,只能说很前卫了。


初步分析实现要点:


1.监控scroll事件,控制操作区域。

2.利用 fixed 定位 ,使得 firefox,chrome下的过滤查询区域始终位于顶部。

3.利用 top:-xxpx,隐掉复杂的过滤区域,只剩下底部的便捷工具条

4.利用webkit以及gecko的私有属性实现工具条悬浮的边框阴影功能。



对于ie6由于不支持fixed定位,淘宝没有实现这个功能,但是有 absolute+scroll 也是可以模拟的,但是就没fixed那么平滑的定位到视窗顶部了,对于高级浏览器用户算是一个惊喜吧 :),我觉得应该想一个方法使得ie6用户得知这个功能,也算促进用户升级,为国内web开发者做贡献。

 

 

 

 

 

 

 

 

 

 

  • 大小: 107 KB
  • 大小: 132.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics