JD商城经典爬楼梯布局，看到就是赚到

<style>* {margin: 0;padding: 0;}#menu {position: fixed;top: 25%;left: 40px;width: 30px;border: 1px solid;}#menu 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;}#menu ul li.last {background: #ccc;color: black;border-bottom: none;}#menu ul li span {display: none;width: 30px;height: 30px;position: absolute;top: 0;left: 0;color: red;}#menu ul li:hover span {display: block;background: darkred;color: white;}#menu ul li span.active {display: block;background: darkred;color: white;}#menu ul li:hover span.active {display: block;background: darkred;color: white;}#header,#main,#footer {margin: auto;width: 1000px;text-align: center;font-size: 40px;font-weight: bold;line-height: 500px;}#main div {height: 700px;font-size: 50px;color: honeydew;line-height: 700px;}#header {height: 500px;background: #ccc;}#footer {height: 500px;background: #ccc;}
</style><div id="menu"><ul><li>1F <span>服饰</span> </li><li>2F <span>美妆</span> </li><li>3F <span>手机</span> </li><li>4F <span>家电</span> </li><li>5F <span>数码</span> </li><li>6F <span>运动</span> </li><li>7F <span>居家</span> </li><li>8F <span>母婴</span> </li><li>9F <span>食品</span> </li><li>10F <span>图书</span> </li><li>11F <span>服务</span> </li><li class="last">Top</li></ul>
</div>
<div id="header">头部</div>
<div id="main"><div class="Louti" style="background: #FF0000;">服饰</div><div class="Louti" style="background: #FF7F00;">美妆</div><div class="Louti" style="background: #FFFF00;">手机</div><div class="Louti" style="background: #00FF00;">家电</div><div class="Louti" style="background: #00FFFF;">数码</div><div class="Louti" style="background: #0000FF;">运动</div><div class="Louti" style="background: #8B00FF;">居家</div><div class="Louti" style="background: aquamarine;">母婴</div><div class="Louti" style="background: pink;">食品</div><div class="Louti" style="background: bisque;">图书</div><div class="Louti" style="background: lightgoldenrodyellow;">服务</div>
</div>
<div id="footer">尾部</div>
<script>// 点击时滑动到该楼层$("#menu ul li:not(:last)").click(function(){$(this).find("span").addClass("active").end().siblings().find("span").removeClass("active");var sTop = $(".Louti").eq($(this).index()).offset().top;$("body,html").animate({"scrollTop": sTop}, 1000);})//点击返回头部$(".last").click(function(){$("body,html").animate({"scrollTop": 0}, 1000);$("#menu li span").removeClass("active");})// 滚动条滚动 楼层号$(window).scroll(function () {//获取页面滚走的距离var sTop = $(document).scrollTop();// 找到满足某个条件的楼层对象var $floor = $(".Louti").filter(function () {// console.log('offset:'+$(this).offset().top)// console.log('stop:'+sTop)// console.log('div:'+$(this).height())return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;})$("#menu li").eq($floor.index()).find("span").addClass("active").end().siblings().find("span").removeClass("active");})
</script>

JD商城经典爬楼梯布局，看到就是赚到相关推荐

python爬虫爬取JD商城快消品的保质期
从网上找的程序,稍加修改,实现在JD商城上爬取商品保质期的功能. 具体步骤如下: 一.准备工作 1)PC下载谷歌浏览器: 2)PC下载配置Selenium工具具体可以参考 Python 爬虫实战 - ...
基于python和selenium爬取JD商城商品信息并且分析用户对于产品的满意程度
我把整个代码都托管在github上了,那里面有详细的api说明文档 https://github.com/hao297531173/JDCommentSpider/tree/master PS:获取的 ...
仿JD商城UI布局达到90%——Android源码
仿JD商城UI布局达到90% 仿JD商城UI布局达到90% 下载地址:http://www.devstore.cn/code/info/1063.html 运行截图: 热门源码下载: 高仿京东 ...
经典算法——爬楼梯（解法归纳）（学习笔记）
问题分析假设你正在爬楼梯.需要 n 阶你才能到达楼顶.每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢?是引用当n=1时,只需爬一个台阶,就是一种解法. 当n=2时,可以走两次 ...
python侯先生爬楼梯_经典算法题:爬楼梯 ,以斐波那契数列来解题代码案例
网上这题的解题思路主要有两种:动态规划斐波那契数列因为我们用斐波那契数列来解,所以我主要描述方法2. 斐波那契数列又称兔子数列, 指得是:1.1.2.3.5.8.13.21.--, 在数学上它 ...
面试经典算法题--爬楼梯的六种解法
题目描述: 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 六种解法: /*** 爬楼梯问题其实质就是斐波那契数列!*/ public cla ...
ElasticSearch 7.8.1教程（from b站狂神）+JD商城仿站
ElasticSearch 7.8.1教程(from b站狂神)+JD商城仿站版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:htt ...
斐波那契数拓展问题：leetcode-70 爬楼梯问题 leetcode-1137 泰波那契数问题解法
假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 这是道经典的题目,我们可以在Leetcode,pta,剑指offer等地方经常看 ...
LeetCode--70. 爬楼梯(动态规划)
爬楼梯(动态规划) 1. 题目描述 2. 题目分析 3. C语言实现 1. 题目描述难度:简单 2. 题目分析爬楼梯这道题是一个很典型的问题了,这是一道经典的动态规划的问题: 动态规划不难发现, ...

JD商城经典爬楼梯布局，看到就是赚到

JD商城经典爬楼梯布局，看到就是赚到相关推荐

最新文章

热门文章