使用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: