js实现楼层滚动效果 js实现楼层滚动效果

本文实例为大家分享了jquery实现滑动楼梯效果，实现楼层的滚动以及点击楼层按钮跳转到对应的楼层，代码如下
html代码：

无意义的文本第一层第二层第三层第四层
1F
2F
3F
4F

css代码：

* {margin: 0; padding: 0; } .layer {height: 300px; font-size: 80px; color: white; text-align: center; } .num1 {background-color: red; } .num2 {background-color: blue; } .num3 {background-color: yellow; } .num4 {background-color: green; } .nav {position: fixed; right: 50px; bottom: 400px; background-color: pink; } ul {list-style: none; } ul li {padding: 10px; width: 50px; height: 50px; line-height: 50px; text-align: center; border: 1px solid #000; } ul li.active {background-color: crimson; }

js代码：

小编再为大家分享一段代码：jquery楼层滚动特效

jq 楼层滚动效果 - 锐客网* {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; }#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; }#header {height: 200px; background: palegoldenrod; text-align: center; line-height: 200px; font-size: 72px; margin: 0 auto; }.louceng {height: 810px; text-align: center; line-height: 610px; font-size: 120px; margin: 0 auto; }
1F服饰
2F美妆
3F手机
4F家电
我是二维码 Top头部服饰美妆手机家电

【js实现楼层滚动效果】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。