jquery电梯导航

比眉伴天荒 2022-01-13 02:43 178阅读 0赞

<body>
    		<div class="main">
    			
    			<div class="maintop"></div>
    			
    			<div id="mela" class="section">
    				<h2>1F男装</h2>
    				<ul></ul>
    			</div>
    			<div id="famela" class="section">
    				<h2>2F女装</h2>
    				<ul></ul>
    			</div>
    			<div id="Beauty" class="section">
    				<h2>3F美妆</h2>
    				<ul></ul>
    			</div>
    			<div id="three" class="section">
    				<h2>4F数码</h2>
    				<ul></ul>
    			</div>
    			<div id="electric" class="section">
    				<h2>5F电器</h2>
    				<ul></ul>
    			</div>
    		</div>
    		
    		<div class="rightfix">
    			<a href="#mela" >1F男装</a>
    			<a href="#famela">2F女装</a>
    			<a href="#Beauty">3F美妆</a>
    			<a href="#three">4F数码</a>
    			<a href="#electric">5F电器</a>
    		</div>
    	</body>

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		for(i=0;i<9;i++){//循坏在ul插入图片
    			$("ul").append("<li><img src='img/8.jpg'/></li>");
    		}
    		$('a').click(function(ev){
    			//判断当前是否有动画在执行
    			!$('html').is(':animated')?$('html').animate({scrollTop: ($($(this).attr('href')).offset().top +1)},400):'';
    			ev.preventDefault();
       		 })
    		$(window).on('scroll',function(){
    			var topHei=$(window).scrollTop();
    			$.each($('.section'),function(index,item){
    				//判断滚动条滚动高度大于哪个盒子就让相应的盒子加上相应的样式
    				topHei>=$('.section').eq(index).offset().top?$('a').eq(index).addClass('active').siblings('a').removeClass('active'):'';
    			})
    		})
    	</script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220113/3dcabc90e03b4b0d9c38995cc3f53999.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现电梯导航效果

原理每个盒子的索引值和每个按钮的索引一一对应,然后运动到相对应的盒子上也就是scrollTop的值成果图 ![在这里插入图片描述][20200303163719

水深无声/ 2023年07月10日 15:45/ 0 赞/ 1 阅读

相关 jquery电梯导航的另外一种方法

/ 1、页面滚动到相应的第一楼的时候右边楼梯的索引按钮要去显示窗口的滚动条 scrollTop > 1T

比眉伴天荒/ 2022年10月02日 09:56/ 0 赞/ 121 阅读

相关 jquery导航菜单

{ margin: 0; padding: 0; } ul{ width: 800px;

末蓝、/ 2022年10月02日 09:54/ 0 赞/ 192 阅读

相关 jquery 面包屑导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

亦凉/ 2022年09月30日 00:50/ 0 赞/ 156 阅读

相关电梯

我们城里最高的建筑物只有一个电梯。请求列表是由n个正数组成的。数字表示电梯在哪个楼层按指定的顺序停车。电梯上一层要6秒，下一层楼要4秒。电梯每站停留5秒。

女爷i/ 2022年06月03日 01:51/ 0 赞/ 175 阅读

相关 jQuery实战_固定导航栏

HTML结构： ![这里写图片描述][70] JS： ![这里写图片描述][70 1] 效果： ![这里写图片描述][70 2] ![这里写图片描述][

清疚/ 2022年05月22日 12:42/ 0 赞/ 223 阅读

相关 js、jquery菜单导航条

漂亮的导航条 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

怼烎@/ 2022年05月09日 10:33/ 0 赞/ 217 阅读

相关 jquery、div+css导航条

<style type="text/css"> content{width:980px;margin:0 auto;} nva

r囧r小猫/ 2022年04月05日 04:15/ 0 赞/ 205 阅读

相关 jQuery置顶导航

Html的代码 <body> <div class="logo_bar">顶部 logo</div> <div class="menu">置顶

一时失言乱红尘/ 2022年02月02日 19:21/ 0 赞/ 250 阅读

相关 jquery电梯导航

<body> <div class="main">  <div class="maintop">

比眉伴天荒/ 2022年01月13日 02:43/ 0 赞/ 179 阅读