天猫首页分类随着滚动事件展示效果
2013-05-08 14:12
537 查看
<ul id="category"> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> <li class="item even"> <div class="title">国际品牌</div> <ul class="list clearfix"> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> <li><a href="#">优衣库</a></li> </ul> </li> </ul>
(function(){ /** @模仿天猫首页的分类展示效果 @基于jQuery @杨永 yang_liulang@126.com 377746756 */ function Category(o){ //保存分类元素 this.categoryBox=o; //保存分类索引列表 this.categoryItems=$(".item",o); //绑定滚动事件 this.bindScroll(); }; Category.prototype={ bindScroll:function(){ var _this=this,topValue,t,oldValue,l; $(window).scroll(function(){ window.clearTimeout(t); topValue=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; t=window.setTimeout(function(){ _this.countPos(topValue); },100); }); }, countPos:function(scrollBarTopValue){//当滚动的时候判断滚动条的位置并设置小于滚动条位置的自分类执行收缩 this.categoryItems.each(function(){ if($(this).position().top<scrollBarTopValue){ $(".list",this).slideUp(); }else{ $(".list",this).slideDown(); }; }); } }; var J_Category=new Category($("#category")); })(); </script>
相关文章推荐
- 新闻客户端首页图片无限循环滚动展示(可点击触发不同事件)初步封装IOS
- 新闻客户端首页图片无限循环滚动展示(可点击触发不同事件)初步封装IOS
- js整频滚动展示效果(函数节流鼠标滚轮事件)
- ecshop首页增加某分类下商品图片滚动效果
- 新闻客户端首页图片无限循环滚动展示(可点击触发不同事件)初步封装IOS
- 【js与jquery】www.zhen.com首页顶部最新更新文章的循环滚动效果
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)
- 首页随着滚动栏的下拉,自动加载产品的设置------Holiday模板
- Android仿淘宝首页头条View垂直滚动效果
- Android电视应用首页开发以及效果展示
- 左右滚动的图片展示效果
- CSS3重构百度图片首页中图片展示效果
- React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
- 使用css实现页面头部固定,下面随着内容的增多滚动,但是头部不动的效果
- 首页垂直滚动TextView广告效果,使用TextSwicher+animation实现
- Android自定义View(LimitScrollerView-仿天猫广告栏上下滚动效果)
- 首页随着滚动栏的下拉,自动加载产品的设置------Holiday模板
- jQuery:书籍展示效果(水平滚动)
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)