实现滚动条电梯效果

今天又学到了新知识,接下来来分享一下这个案例是如何做的

素材来自于黑马教程我把网址发在这里大家可以自行下载,里面包含素材,和图片等!

百度网盘 请输入提取码

首先还是咱们HTML部分,因为代码过多,想了解具体情况可以去看看教程,我们来挑一个来讲就行,data-name="new"这是意思是自定义标签,

这段代码是一个HTML标签,表示自定义导航的标签。其中,data-name="new"是一种HTML5中的自定义属性,用于在HTML元素上存储额外的信息。它可以用JavaScript来访问和操作。在自定义导航时,您可以使用这个属性来表示不同的导航标签名称,以便在后续操作中更方便地识别和处理。

然后我们需要一个公共样式command的样式表来设置公共样式,在设置一个我们自己的index样式,这里已经给我弄好了,就直接讲js部分,源码我会放在下面

我们先需要设置一个自执行的函数,来防止我们变量的污染,下面我们来获取两个元素,然后还是给我们窗口也就是Windows来加一个滚动事件

scrool是滚动条意思,这里是添加一个滚动事件,这里是做了一个判断,

document.documentElement.scrollTop是滚动到相应的位置,这里判断的依据就是,如果我这个n的值大于三百那么我们就显示,否则隐藏

最后这个操作做完之后我们需要做一个返回到顶部操作,还是先获取我们最后一个值,然后添加点击事件之后,然这个滚动条滚动到顶部,这里等于0就是滚动顶部的意思

然后进行我们第二个操作,还是定义一个自执行函数,然后我们来获取这个滚动条,来进行排他思想,这里也是进行一个判断,如果原来的active有这个对象,就移除,反之就不删除这个对象,然后这一个模块最后一个地方,我们需要获取到对应的大盒子,所以我们先来获取我们的自定义函数,然后根据小盒子来选大盒子,使用模板字符串来获取这些li的字符串,最后让我们来对应到相应的盒子位置

也就是

 document.documentElement.scrollTop=top

最后我们这个模块是让我们划到那个模块,哪个地方就自己亮色

还是需要获取我们四个小li的元素,因为我们HTML写了自定义函数,我们直接获取即可

然后还是来让我们的n来判断如果我们滚到了下一个模块的话,下一个地方就会自动高亮,这里也是使用双elseif来写,最后一个用else就限制死了,如果我们还需要加一个模块,那么就需要继续判断,反正最后也就是傻瓜式判断,很好理解!

由于代码里及其繁多!!,毕竟也是我之前自学学的第一个布局案例,所以我特意告诉大家素材位置就在jsAPI里面第三天的素材里面有个电梯的素材,直接文件夹下载即可!

喜欢的话就记得三连噢!!!,谢谢大家

你可能感兴趣的:(javascript,dreamweaver,数学建模)