楼层直达效果解读

来源：互联网发布：淘宝最好的书店编辑：程序博客网时间：2024/04/26 11:55

当页面滚动到某个位置的时候，左侧的楼层直达div显示到对应位置，

楼层直达div

<div class="elevator" style="display: block;"><div class="floor"><p>楼层直达</p><ul><li class="rf1"><i class="icon"></i><span class="text">日用百货</span></li><li class="rf2"><i class="icon"></i><span class="text">汽车用品</span></li><li class="rf3"><i class="icon"></i><span class="text">服饰鞋包</span></li><li class="rf4"><i class="icon"></i><span class="text">食品饮品</span></li><li class="rf5 cur"><i class="icon"></i><span class="text">家饰家纺</span></li></ul><div class="gotop"><a href="#"><i class="icon"></i>返回顶部</a></div></div></div>

核心楼层直达效果js

$(document).ready(function(){$('.nav_sub_l li').hover(//楼层直达div鼠标滑过效果function(){var obj = $(this).children(".list_item");obj.css('display','block');$(this).addClass("cur");},function(){var obj=$(this).children(".list_item");obj.css('display','none');$(this).removeClass("cur");});$('div.elevator li').click(function(){//楼层直达的点击效果var ind=$('div.elevator li').index(this)+1;//传递一个DOM对象(this)，返回这个对象在原先集合中的索引位置var topVal=$('.floor_'+ind).offset().top;$('body,html').animate({scrollTop:topVal-41},500);})$('.gotop').click(function(){$('body,html').animate({scrollTop:0},500);});$(window).scroll(scrolls);});function scrolls(){var f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12,f13;var sTop=$(window).scrollTop();//网页滚动条高度var liItem=$('div.elevator li');//楼层直达divvar floor=$('.elevator');//楼层直达divfl=$('.floor_1').offset().top-200;//网页中第一楼的滚动条高度f2=$('.floor_2').offset().top-200;f3=$('.floor_3').offset().top-200;f4=$('.floor_4').offset().top-200;f5=$('.floor_5').offset().top-200;if(sTop >= fl && sTop < fl+210){floor.fadeIn(500);//淡入效果liItem.eq(0).addClass('cur').siblings().removeClass('cur');//当前楼层加上样式cur,兄弟楼层去掉样式cur}if(sTop < fl){floor.fadeOut(500);//淡出效果}if(sTop >= f2){liItem.eq(1).addClass('cur').siblings().removeClass('cur');}if(sTop >= f3){liItem.eq(2).addClass('cur').siblings().removeClass('cur');}if(sTop >= f4){liItem.eq(3).addClass('cur').siblings().removeClass('cur');}if(sTop >= f5){liItem.eq(4).addClass('cur').siblings().removeClass('cur');}}

我的微信号

阅读全文

0 0