原生js实现京东商城楼梯效果

这个可能有些兼容问题和小bug,新手写的不完善 欢迎指出

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><style type="text/css">*{margin: 0px;padding: 0px;list-style: none;}#header{width: 1000px;height: 650px;margin: 0 auto;position: relative;}.fl{width: 1000px;height: 600px;margin: 0 auto;position: relative;}#footer{width: 1000px;height: 600px;margin: 0 auto;position: relative;}#calc{height: 360px;width: 30px;position: fixed;display: none;left: 20px;top: 100px;}#calc ul li{width: 28px;height: 28px;border: dashed 1px lightgray;text-align: center;line-height: 30px;cursor: pointer;position: relative;}#calc ul li span{display: none;width: 28px;height: 28px;position: absolute;z-index: 1;background-color: red;overflow: hidden;top: 0px;left: 0px;font-size: 12px;}</style>
</head>
<body>
<div id="calc"><ul id="ul"><li>1<span>服饰</span></li><li>2<span>美妆</span></li><li>3<span>手机</span></li><li>4<span>家电</span></li><li>5<span>数码</span></li><li>6<span>服务</span></li><li>7<span>图书</span></li><li>8<span>母婴</span></li><li>9<span>家具</span></li><li>10<span>运动</span></li><li>11<span>食品</span></li><li>top<span>顶部</span></li></ul>
</div>
<div id="header"><img src="header.png">
</div>
<div class="fl"><img src="服饰.png">
</div>
<div class="fl"><img src="美妆.png">
</div>
<div class="fl"><img src="手机.png">
</div>
<div class="fl"><img src="家电.png">
</div>
<div class="fl"><img src="数码.png">
</div>
<div class="fl"><img src="服务.png">
</div>
<div class="fl"><img src="图书.png">
</div>
<div class="fl"><img src="母婴.png">
</div>
<div class="fl"><img src="居家.png">
</div>
<div class="fl"><img src="运动.png">
</div>
<div class="fl"><img src="食品.png">
</div>
<div id="footer"><img src="footer.png"></div>
</body>
</html>
<script type="text/javascript">
var header=document.getElementById('header');
var fl=document.getElementsByClassName('fl');
var footer=document.getElementById("footer");
var ul=document.getElementById("ul");
var li=ul.getElementsByTagName('li');
var span=ul.getElementsByTagName("span");
window.addEventListener("scroll",function(){var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop;console.log(scrollTop)if(scrollTop>=650){ul.parentNode.style.display="block";}if(scrollTop<650){ul.parentNode.style.display="none";}for(i in fl){if(fl[i].offsetTop-scrollTop>-300){that=span[i];for(var j=0;j<span.length;j++){if (span[j]!=that) {span[j].style.display="none"}}span[i].style.display="block";return false}}
},0)for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("mouseover",function(){span[index].style.display="block";},false)})(i)
}
for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("click",function(){span[index].style.display="block";document.body.scrollTop=index*600+650;},false)})(i)
}
for(var i=0;i<li.length;i++){(function(index){li[index].addEventListener("mouseout",function(){span[index].style.display="none";},false)})(i)
}
</script>

  

转载于:https://www.cnblogs.com/luckychenchen/p/5624841.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271531.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA云行项目提示Error: java: OutOfMemoryError

idea运行项目提示如下 解决方法: 调整一下Compiler下面的Compiler Process heap size 参数&#xff0c;默认的是700。如果2048还不能解决问题&#xff0c;试着将它调得更大一些吧&#xff0c; 修改为2048 修改后运行成功

常见的BIOS硬盘故障现象及急救措施

硬盘是电脑的数据仓库&#xff0c;是最为重要的存储设备&#xff0c;由BIOS直接管理。如果硬盘出现故障&#xff0c;一般情况下系统通常会显示一些提示信息&#xff0c;说明问题所在。下面&#xff0c;将一些常见的硬盘故障信息向大家一一介绍。1 C&#xff1a;Drive Failure …

js var是什么类型_JS变量的执行环境和生命周期

温故而知新&#xff0c;这些JS基础知识你都知道吗&#xff1f;今天和大家分享的是 JavaScript 中有关变量的知识&#xff0c;希望这篇文章能让你对JS中的变量有新的认识.目录&#xff1a;变量的执行环境&#xff08;执行上下文&#xff09;执行上下文的生命周期创建变量对象变量…

网络中不能显示全部计算机,win10家庭版局域网中计算机设备无法完全显示的解决方法...

许多用户都喜欢通过局域网来共享一些文件等&#xff0c;打开局域网就可以看到所有共享的计算机&#xff0c;然而有不少win10家庭版用户却发现局域网中只能看到几台计算机设备&#xff0c;无法完全显示&#xff0c;该怎么办呢&#xff0c;现在为大家讲解一下win10家庭版局域网中…

java.lang.NoClassDefFoundError:org/apache/commons/io/Charsets (jsoup配合htmlunit 爬取异步加载的网页遇到的)

最近用jsoup配合htmlunit 爬取异步加载的网页运行代码的时候,报错java.lang.NoClassDefFoundError:org/apache/commons/io/Charsets 报错截图如下 解决措施: 1:common-fileupload 1.3.1的版本依賴的commons-io 2.2&#xff0c;而htmlunit的jar依賴的是common-io 2.4 htmlunit…

echarts 3d地球 背面光线太暗_新技术:多波长光源,同时3D打印多种光敏树脂材料...

如今&#xff0c;光固化3D打印技术已经被广泛的采用&#xff0c;在齿科、首饰、手办等领域&#xff0c;然而如上图一样的常规光固化3D打印机&#xff0c;一次仍然只能打印一种材料。 △FDM技术类型的3D打印机可以通过增加喷头数量来实现多色或者多种材料同时打印&#xff0c;图…

2016-6-28 工作总结

今天是软件工程课设开始的第一天。经过一早上听老师的课程说明与用户反馈的讲解&#xff0c;我可以看得出老师对于这次课程设计的质量有着很高的期待与严格的要求&#xff0c;不再允许有浑水摸鱼的现象发生&#xff0c;我想&#xff0c;从某种程度上来讲&#xff0c;是一种好事…

计算机系统基础:计算机性能评价知识笔记

1、计算机性能常用的性能评测方法 1.1 时钟频率 计算机的时钟频率可以反映出机器的运行速度。一般主频越高&#xff0c;速度越快。 1.2 指令执行速度 加法指令执行速度是衡量计算机性能指标的重要指标之一。 1.3 等效指令速度法 随着计算机指令系统发展&#xff0c;种类越来越多…

astc贴图格式是什么意思_c4d配合AEe3d导入c4d模型贴图及插件安装所有流程

所有使用的软件及插件&#xff0c;分享给大家&#xff0c;需要软件或者插件的可以留言我&#xff0c;免费分享给大家&#xff0c;其实也可以网上下载到&#xff0c;就是有的版本和相应需要的插件不兼容和支持&#xff0c;。不少小伙伴用c4d做模型&#xff0c;做好后到底怎么玩&…

html5做文字颜色渐变代码,神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧

本文实例为大家分享了DIVCSSJS实现的文字颜色渐变效果&#xff0c;供大家参考&#xff0c;具体内容如下下面是 CSS 部分代码&#xff1a;body{ font:12px/1.5 Microsoft Yahei;}h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei…

前大灯是近光灯还是远光灯_汽修案例:长安福特翼博前大灯间歇自动点亮

点击↑汽修案例关注置顶&#xff0c;获得正时大全一辆行驶里程约2300km的2017年长安福特翼博。客户反映&#xff1a;该车在行驶过程中前大灯间歇出现自动点亮的故障现象。故障现象出现时大灯点亮与否不受大灯开关控制&#xff0c;如图1所示。故障诊断&#xff1a;车辆来店报修时…

commons-httpclient 和 httpclient 区别

commons-httpclient 和 httpclient 区别 项目里的pom中&#xff0c;里面有这么两个包依赖。 <dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version> </depend…

计算机基础:多媒体基础知识笔记

1、媒体的定义 媒体包括两面&#xff1a; 1、物理载体&#xff1a;比如磁盘、光盘、磁带以及相关的播放设备。 2、信息载体&#xff1a;也就是信息的表现形式&#xff0c;比如文字、声音、图像、动画、视频等。CCITT定义的存储媒体和表示媒体。 2、媒体的分类 1、感觉媒体&…

gnuradio上怎么使用python文件_使用Python从PDF文件中提取数据

前言数据是数据科学中任何分析的关键&#xff0c;大多数分析中最常用的数据集类型是存储在逗号分隔值(csv)表中的干净数据。然而&#xff0c;由于可移植文档格式(pdf)文件是最常用的文件格式之一&#xff0c;因此每个数据科学家都应该了解如何从pdf文件中提取数据&#xff0c;并…

Attach Volume 操作(Part I) - 每天5分钟玩转 OpenStack(53)

上一节我们创建了 volume&#xff0c;本节讨论如何将 volume attach 到 Instance&#xff0c;今天是第一部分。 Volume 的最主要用途是作为虚拟硬盘提供给 instance 使用。Volume 是通过 Attach 操作挂载到 instance 上的。本节我们就来详细讨论 Cinder 是如何实现 Attach 的。…

计算机网络技术课程代码02141模拟试题,02141计算机网络技术201510真题及答案

2015年10月高等教育自学考试全国统一命题考试计算机网络技术试卷(课程代码02141)本试卷共4页。满分l00分&#xff0c;考试时间l50分钟。考生答题注意事项&#xff1a;1&#xff0e;本卷所有试题必须在答题卡上作答。答在试卷上无效&#xff0c;试卷空白处和背面均可作草稿纸。2…

python如何确定拐点_多年股市老鸟买卖操作经验——如何在波段操作确定买入点!经典...

多年股市老鸟买卖操作经验——如何在波段操作确定买入点&#xff01;经典&#xff01;股市谚语&#xff1a;“长线是金,短线是银,波段操作是钻石。”这从一个侧面反映了波段操作的重要性。波段操作就是在股价趋势变化的早期阶段辨识买卖机会&#xff0c;在波动的阶段性底部(谷底…

c#geckofx文件流下载

备注&#xff1a;内容仅提供参考。 ⒈添加引用&#xff1a;using Gecko; ⒉然后根据自己的情况在某个方法内添加事件&#xff1a; LauncherDialog.Download new EventHandler<LauncherDialogEvent>(OnDownloadFile); ⒊再声明方法&#xff1a; private void OnDownloadF…

获取后端接口请求中的参数(@PathVariable,@RequestParam,@RequestBody区别,使用postman请求

获取参数 SpringBoot提供的获取参数注解包括&#xff1a;PathVariable&#xff0c;RequestParam&#xff0c;RequestBody,三者的区别如下表&#xff1a; 一:后端接口什么都不加 postman请求后端接口 二:后端接口加RequestParam POST请求RequestParam&#xff1a; ① 用来处理…

spark shell 删除失效_Spark任务提交源码解析

1. 前言反反复复捣鼓了很久&#xff0c;终于开始学习Spark的源码了&#xff0c;果不其然&#xff0c;那真的很有趣。这里我打算一本正经的胡说八道来讲一下Spark作业的提交过程。基础mac系统基础环境如下&#xff1a;JDK 1.8IDEA 2019.3源码Spark 2.3.3Scala 2.11.8提交脚本# 事…