滚轮事件滑出顶部导航效果

最新推荐文章于 2023-07-06 11:32:44 发布
最新推荐文章于 2023-07-06 11:32:44 发布
阅读量88 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellolrf/article/details/113107351
版权

文献种类：专题技术文献；
开发工具与关键技术：
作者：刘任锋 ；年级： 2020级 ；撰写时间： 2021年1月25日；
在这里插入图片描述
Show为滑出的顶部导航的块。
在这里插入图片描述
aha为图片的覆盖。
在这里插入图片描述
其他块的样式，可以忽略
在这里插入图片描述
JS部分
在这里插入图片描述
页面加载事件，
获取show的ID，
在这里面写一个鼠标滚轮事件，
当滚轮滚到500px时show的块显示，
否则则消失。

效果图
01
在这里插入图片描述
在这里插入图片描述
结束；

hellolrf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery鼠标滚轮滑动到页面节点部分.zip
07-03
总的来说，"jQuery鼠标滚轮滑动到页面节点部分"是一个实用的网页交互功能，它利用jQuery和CSS3的强大力量，提升了用户在页面上的导航体验。开发者可以根据自己的需求对这个效果进行定制，比如增加动画的复杂性、调整...
PC端横向滚动视觉差效果
03-26
在本案例中，我们关注的是"PC端横向滚动视觉差效果"，这是一种在个人电脑平台上通过鼠标滚轮实现的特殊滚动效果，能够让用户在水平方向上浏览内容，同时产生视觉上的立体感。 实现这种效果通常涉及到以下几个关键...
JavaScript滚轮事件
weixin_43228946的博客
08-21 2857
现在，我们大概看下代码的具体逻辑。首先我们通过id获取div的对象d,接着给给d设置滚动事件 onmousewheel，接着我们要判断滚动的方向，event.wheelDelta > 0表示向上滚，event.detail < 0也表示向上滚，这里需要注意下event.wheelDelta不支持·火狐浏览器。如果我们在有浏览器中，在div里面进行滚动，浏览器的滚动给条也会跟着滚动，这样体验不太好。为了解决这个问题，我们在代码里返回false,就可以解决这个问题。还有一种情况，使用addEventListen
JavaScript鼠标滚轮事件
前端开发小白9527
04-11 3746
JavaScript鼠标滚轮事件
js 滚轮事件
qq_35385241的博客
04-14 1502
js滚轮事件 目前不同浏览器的滚轮事件如下： 事件 浏览器 wheel Chrome(31+), FF(17+), IE(9+) mousewheel Chrome, IE(6+), Opera, Safari MozMousePixelScroll FF(3.5 only!) (2010-2013) DOMMouseScroll FF(0.9.7+) since 2003 因此通用的滚轮事件有3个：wheel/mousewheel/DOMMouseScroll 为此可以封装
js的滚轮事件
个人笔记
03-26 3961
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //滚轮事属于鼠标事件 只是滚轮兼容性不一样 //滚轮事件直接加给文档 document
【VUE】JS监听鼠标上下滚动事件
sunshineTing2的博客
07-06 3568
【代码】【VUE】JS监听鼠标上下滚动事件。
滚轮打开样式
12-24
2. **滑动切换**：这是一种常见的滚动效果，元素在进入视口时沿着特定方向滑动，例如从顶部或底部滑入，增加了动态感。 3. **缩放效果**：元素在进入视口时放大，离开时缩小，这种效果能引导用户的注意力，并突出...
精美flash导航按钮
04-16
在实际应用中，Flash导航按钮的集成需要配合网站的总体设计风格，确保与背景、字体、色彩等元素协调一致，营造出和谐统一的视觉效果。同时，按钮的布局也应符合用户的浏览习惯，通常是水平或垂直排列于页面顶部或...
滚动菜单网站 
10-14
当用户滚动页面时，菜单栏会固定在浏览器窗口的顶部或底部，使得用户在任何位置都能轻松访问主要的导航链接，无需滚动回页面顶部。这种设计模式提高了网站的可用性，尤其是对于内容丰富的长页面，使得用户可以更高效...
滚轮事件——js
mantou_riji的博客
04-08 787
滚轮事件——js 实现效果： 滚轮向上移动，变长； 滚轮向下移动，变短 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #box1{ width: 100px; height: 100px; background-color: rosybrown;
js鼠标滚轮事件
piaoliangj的博客
03-06 8615
21.js鼠标滚轮事件——软设问题总结1.滚轮事件简述2.主要js代码 1.滚轮事件简述 当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。 2.主要js代码 因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。 window.addEventListener("wheel", function(e) { let evt = e || window.event; //考虑兼容性 evt.preventD
js中鼠标滚轮事件详解
热门推荐
林中明月间丶
08-30 2万+
参考两个他人的博客:https://www.cnblogs.com/ysx215/p/7002338.html https://www.cnblogs.com/syll/p/6233684.html &lt;body style="height:2000px"&gt; &lt;script type="text/javascript"&gt; var scrollFunc = fu...
JS滚轮事件(mousewheel/DOMMouseScroll)了解
weixin_33862188的博客
02-15 226
  已经没有了小学生时代过目不忘的记忆力了，很多自己折腾的东西、接触的东西，短短1年之后就全然不记得了。比方说，完全记不得获取元素与页面距离的方法(getBoundingClientRect)，或者是不记得现代浏览器下触发DOM自定义事件的方法(dispatchEvent). 显然，适当的温习，翻阅以前的东西，或者自己空余时间处理相关的东西还是有必要的。其实，细想，东西记不住是自己自身原因，在折腾...
js--滚轮事件
cmy741741的博客
07-06 610
啊啊啊
JS事件-鼠标滚轮事件
每天进步一点点
05-27 2万+
之前学习了onmouseover，onmousedown等鼠标事件，今天来看看鼠标的滚轮事件，浏览器兼容一直是让人比较恶心的事情，今天就让我们将恶心进行到底，看看这个恶心的鼠标滚轮事件！   鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的，但是火狐FF下却不识别onmousewheel，在FF下需要用DOMMouseScroll，并且必须用“事件监听”
html鼠标滚轮隐藏导航,纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]
weixin_34684706的博客
06-04 313
前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。方法这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-y: scroll;overflow-x: hi...
监测鼠标滚轮的上下滚动来实现导航条显示隐藏
dream_halo的博客
03-19 2985
$(document).on("mousewheel DOMMouseScroll", function (e) {     var delta = (e.originalEvent.wheelDelta &amp;&amp; (e.originalEvent.wheelDelta &gt; 0 ? 1 : -1)) || // chrome &amp; ie (...
vue3监听滚轮滑动事件
最新发布
11-04
在Vue3中，可以通过在模板中使用`@scroll`指令或在组件中使用`v-on:scroll`指令来监听滚轮滑动事件。具体实现方法如下： 1. 在模板中使用`@scroll`指令： ```html <!-- content --> export default { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值