JS模仿电商推广页面的滑动楼层定位。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery电商网站楼层滚动定位</title> <style type="text/css"> *{margin: 0;padding: 0;} i{font-style: normal;} ul,li,dl,ol{list-style: none;} #LoutiNav{ border: 1px solid gray; width: 30px; position: fixed; top: 150px; left: 50px; display: none;} #LoutiNav li{ width: 30px; height: 30px;border-bottom: 1px solid gray; line-height: 30px; text-align: center; cursor: pointer;} #LoutiNav span{display: none;} #LoutiNav .active{background: white; color: darkred;} #LoutiNav li:hover span{display: block; font-size: 12px; background: darkred; color: white;} #LoutiNav li:hover i{display: none;} #goTop{width: 40px;height: 40px; line-height: 40px;text-align: center; background: gray; position: fixed;bottom: 30px; right: 30px; cursor: pointer;border-radius: 5px; display: none; } #goTop:hover{background: darkred; color: white;} #goTop:hover span{display: block;} #header{height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto;} .louceng{ height: 810px; width: 1440;text-align: center; line-height: 800px; font-size: 120px; margin: 0 auto;} #erweima{width: 130px; height: 130px; background: palegreen; display: none; position: absolute; right: 46px; bottom: 5px;line-height: 130px; text-align: center; font-size: 20px; border-radius:10px ;} </style> </head> <body> <ul id="LoutiNav" style="display: block;"> <li class=""><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li><i>4F</i><span>家电</span></li> <li><i>5F</i><span>数码</span></li> <li><i>6F</i><span>运动</span></li> <li><i>7F</i><span>居家</span></li> <li><i>8F</i><span>母婴</span></li> <li><i>9F</i><span>食品</span></li> <li><i>10F</i><span>图书</span></li> <li style="border-bottom: none;"><i>11F</i><span>服务</span></li> </ul> <div id="goTop" style="display: block;"> <span id="erweima">我是二维码</span>Top</div> <div id="header">头部</div> <div id="main"> <div class="louceng" style="background: papayawhip;">服饰</div> <div class="louceng" style="background: peachpuff;">美妆</div> <div class="louceng" style="background: peru;">手机</div> <div class="louceng" style="background: pink;">家电</div> <div class="louceng" style="background: palegoldenrod;">数码</div> <div class="louceng" style="background: plum;">运动</div> <div class="louceng" style="background: powderblue;">居家</div> <div class="louceng" style="background: rosybrown;">母婴</div> <div class="louceng" style="background: cornflowerblue">食品</div> <div class="louceng" style="background: mediumpurple;">图书</div> <div class="louceng" style="background: darkslateblue;">服务</div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var oNav = $('#LoutiNav');//导航壳 var aNav = oNav.find('li');//导航 var aDiv = $('#main .louceng');//楼层 var oTop = $('#goTop'); //回到顶部 $(window).scroll(function(){ var winH = $(window).height();//可视窗口高度 var iTop = $(window).scrollTop();//鼠标滚动的距离 if(iTop>=$('#header').height()){ oNav.fadeIn(); oTop.fadeIn(); //鼠标滑动式改变 aDiv.each(function(){ if(winH+iTop - $(this).offset().top>winH/2){ aNav.removeClass('active'); aNav.eq($(this).index()).addClass('active'); } }) }else{ oNav.fadeOut(); oTop.fadeOut(); } }) //点击top回到顶部 oTop.click(function(){ $('body,html').animate({"scrollTop":0},500) }) //点击回到当前楼层 aNav.click(function(){ var t = aDiv.eq($(this).index()).offset().top; $('body,html').animate({"scrollTop":t},500); $(this).addClass('active').siblings().removeClass('active'); }); </script> </body> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: