使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息）

最新推荐文章于 2021-08-10 00:17:48 发布

ZHANGJIN9546

最新推荐文章于 2021-08-10 00:17:48 发布

阅读量799

点赞数

分类专栏：案例文章标签：使用jq实现电商网站“楼梯”效果制作（左侧显示楼层号、显示对应楼层信息

本文链接：https://blog.csdn.net/ZHANGJIN9546/article/details/93981062

版权

本文介绍如何利用jQuery创建电商网站楼层导航效果，包括点击楼层号显示相应内容，高亮当前选中楼层，实现回到顶部功能，以及通过滚动条定位楼层。关键点涉及获取滚动条位置、设置页面滚动距离和使用jQuery操作样式。

摘要由CSDN通过智能技术生成

使用jq实现电商网站“楼梯”效果制作

思路：
1、点击左侧的楼层号显示对应的楼层信息
操作当前点击的楼层号的高亮显示
点击不同楼层号设置页面滚走的距离为当前楼层距离内容窗口的top值
2、点击 top 回到顶部
3、操作滚动条显示对应的楼层号
4、技术点：滚动条的获取、页面滚走的距离、jq操作样式、对应下标显示楼层内容（在代码中我都会详细注释）

//代码分享

<!DOCTYPE html>
<html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			#LoutiNav{
    				
    				position: fixed;
    				top: 25%;
    				left: 40px;
    				width:30px;
    				border: 1px solid ;
    			}
    			#LoutiNav ul li{
    				position:relative;
    				width:30px;
    				height:30px;
    				list-style:none;
    				text-align:center;
    				line-height: 30px;
    				font-size: 12px;
    				cursor: pointer;
    				border-bottom: 1px dotted #AAAAAA;
    			}
    			#LoutiNav ul li.last {
    				background: darkred;
    				color: white;
    				border-bottom: none;
    			}
    			#LoutiNav ul li span{
    				display: none;
    				width:30px;
    				height: 30px;
    				position: absolute;	
    				top: 0;
    				left: 0;
    				color:red;
    			}
    			#LoutiNav ul li:hover span{
    				display: block;
    				background: darkred;
    				color: