如何用js实现鼠标向上滚动时浮动菜单 跟随滚动导航

来源：蜘蛛抓取(WebSpider) 时间：2016-11-23 01:38 标签： 右侧随滚动条浮动导航
脚本简介JS实现文字上下滑动导航是一款用原生JS实现jQuery文字上下滑动导航效果代码。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.js如何判断滚轮的上下滚动，我们应该都见到过这种效果，用鼠标滚轮实现某个表单内的数字向上滚动就增加，向下滚动就减少的操作，这种效果是通过js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动，简要分享。
首先，不得不说一下，因为不同的有不同的滚轮事件。主要是有两种，onmousewheel（firefox不支持）和DOMMouseScroll（只有firefox支持），关于这两个事件这里不做详述，想要了解的朋友请移步：鼠标滚轮(mousewheel)和DOMMouseScroll事件，所以在这个过程中需要添加事件监听，代码如下：兼容firefox采用addEventListener监听。
&if(document.addEventListener){&&&&&document.addEventListener('DOMMouseScroll',scrollFunc,false);&}&window.onmousewheel=document.onmousewheel=scrollF&
另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性，现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义却是一致的，detail只取&3，wheelDelta只取&120，其中正数表示为向上，负数表示向下。
具体的示例代码如下所示：
&for=&wheelDelta&滚动值:(IE/Opera)&type=&text&&id=&wheelDelta&&&for=&detail&滚动值:(Firefox)&type=&text&&id=&detail&&&type=&text/javascript&&var&scrollFunc=function(e){&&&&&ee=e&||&window.&&&&&var&t1=document.getElementById(&wheelDelta&);&&&&&var&t2=document.getElementById(&detail&);&&&&&if(e.wheelDelta){//IE/Opera/Chrome&&&&&&&&&t1.value=e.wheelD&&&&&}else&if(e.detail){//Firefox&&&&&&&&&t2.value=e.&&&&&}&}&/*注册事件*/&if(document.addEventListener){&&&&&document.addEventListener('DOMMouseScroll',scrollFunc,false);&}//W3C&window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome&&
通过运行上述代码我们可以得出以下结果：
在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
代码部分如下，e.wheelDelta是判断是否为非firefox浏览器，e.detail为firefox浏览器
if(e.wheelDelta){&&&&&t1.value=e.wheelD&}else&if(e.detail){&&&&&t2.value=e.&}&
也许你会喜欢和关注与本文内容高度相关的文章：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）当前位置： >
JS不间断向上滚动
　来源/作者：懒人图库　分类：　
提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。
用到的图片：
猜你也喜欢看这些 ??????
这些是最新的 ??????
我们一直在进步2款jQuery鼠标经过上下滑动切换的导航效果 - 素材家园
当前位置： >
> 2款jQuery鼠标经过上下滑动切换的导航效果
2款jQuery鼠标经过上下滑动切换的导航效果
大家都在下载
这些是最新的
素材家园免费素材网

我要回帖

更多关于 右侧随滚动条浮动导航 的文章

 

随机推荐