鼠标滚动事件

最新推荐文章于 2022-09-06 16:34:00 发布
最新推荐文章于 2022-09-06 16:34:00 发布
阅读量424 收藏
点赞数
文章标签： 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qqABCDYOONA/article/details/78113007
版权 


<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .cont {
            height: 5000px;
        }

        #top {
            position: fixed;
            width: 100%;
            height: 50px;
            top: 0px;
            left: 0px;
            background-color: cornflowerblue;
            display: none;
        }

        #left {
            position: fixed;
            top: 150px;
            left: 20px;
            height: 500px;
            width: 50px;
            background-color: lawngreen;
            display: none;
        }

        #left ul{
            list-style: none;
            padding-left:0px ;
        }

        #left ul li{
            border: 1px solid black;
            text-align: center;
            margin-top: 10px;
        }
    </style>

    <script>
        //          var a = 0;

        //滚动事件
        function myScroll() {
            //              a++;

            var i = document.body.scrollTop;
            var top = document.getElementById("top");
            var left = document.getElementById("left");
            var f1 = document.getElementById("f1");
            var f2 = document.getElementById("f2");
            var f3 = document.getElementById("f3");
            var f4 = document.getElementById("f4");
            var f5 = document.getElementById("f5");

            //控制顶部
            if(i >= 1000) {
                top.style.display = "block";
                top.innerHTML = i;
            } else {
                top.style.display = "none";
            }

            //控制左侧
            if(i >= 2000) {
                left.style.display = "block";
            } else {
                left.style.display = "none";
            }

            //              显示楼层
            if(i >= 2000 && i <= 2500) {
                f1.className = "a";
                f2.className = "";
                f3.className = "";
                f4.className = "";
                f5.className = "";
            } else if(i > 2500 && i <= 3000) {
                f1.className = "";
                f2.className = "a";
                f3.className = "";
                f4.className = "";
                f5.className = "";
            } else if(i > 3000 && i <= 3500) {
                f1.className = "";
                f2.className = "";
                f3.className = "a";
                f4.className = "";
                f5.className = "";
            } else if(i > 3500 && i <= 4000) {
                f1.className = "";
                f2.className = "";
                f3.className = "";
                f4.className = "a";
                f5.className = "";
            } else if(i > 4000 && i <= 4500) {
                f1.className = "";
                f2.className = "";
                f3.className = "";
                f4.className = "";
                f5.className = "a";
            }
        }
    </script>

</head>

<body onscroll="myScroll()">

    <div id="left">
        <ul>
            <li id="f1">F1</li>
            <li id="f2">F2</li>
            <li id="f3">F3</li>
            <li id="f4">F4</li>
            <li id="f5">F5</li>
        </ul>
    </div>

    <div id="top"></div>
    <div class="cont"></div>

</body>

Y_林大俊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML之鼠标移动事件
一岁一枯荣的博客
09-27 8072
鼠标事件： <meta charset="utf-8" /> div{ width: 200px; height: 200px; border: 1px solid #000000; f
html鼠标滚动事件,鼠标滚动事件mousewheel（DOMMouseScroll）
weixin_28760183的博客
06-05 4467
滚轮事件只有firefox比较特殊，使用DOMMouseScroll; 其他浏览器使用mousewheel;1.mousewheel事件中的 “event.wheelDelta”属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向下滚动；返回的值，均为 120 的倍数，即：幅度大小 = 返回的值 / 120。2. DOMMouseScroll事件中的 “event.detail”...
HTML5触摸事件(touchstart、touchmove和touchend)
热门推荐
fuqinyijiu的专栏
11-20 22万+
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 　　一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员
【前端/Vue】 监听滚动事件 实现 吸附指定位置卡点的简单应用
weixin_63764455的博客
09-06 4638
Vue @mousewheel实现l常见网站首页滚动 / 吸附 / 卡位 的简单应用
html js鼠标滚轮事件,JS事件-鼠标滚轮事件
weixin_30495795的博客
06-04 790
之前学习了onmouseover，onmousedown等鼠标事件，今天来看看鼠标的滚轮事件，浏览器兼容一直是让人比较恶心的事情，今天就让我们将恶心进行到底，看看这个恶心的鼠标滚轮事件！鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的，但是火狐FF下却不识别onmousewheel，在FF下需要用DOMMouseScroll，并且必须用“事件监听”方式添加事...
鼠标滚动事件动画特效代码
03-20
"鼠标滚动事件动画特效代码"就是一个很好的例子，它利用jQuery库实现了当用户点击导航或滚动鼠标时，整个网页body部分产生旋转动画的效果。这种特效不仅能够吸引用户的注意力，还能为网站增添独特的视觉魅力。 首先...
鼠标滚动事件动画.zip
07-04
【标题】"鼠标滚动事件动画.zip"所包含的知识点主要集中在JavaScript（JS）与jQuery库的应用上，特别是针对用户交互的响应式设计和动画效果的实现。在这个项目中，开发者利用了jQuery的事件监听和CSS3的动画特性，...
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip
11-22
本项目"jQuery鼠标滚动事件动画 jQuery鼠标滚动事件动画宣传页面.zip"是利用jQuery实现的一种交互效果，特别是针对鼠标滚动事件的处理，用于创建动态且吸引人的宣传页面。这个压缩包包含了一个基于HTML5、CSS和...
vue 使用鼠标滚动加载数据的例子
10-16
在Vue.js应用中，实现鼠标滚动加载数据是一种常见的优化用户体验的方法，特别是在处理大量数据列表时。这种方法被称为“无限滚动”或“滚动加载”。通过监听滚动事件，当用户接近页面底部时，可以动态加载更多数据，...
html中鼠标滚轮事件onmousewheel的处理方法
09-01
下面小编就为大家带来一篇html中鼠标滚轮事件onmousewheel的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
鼠标滚轮滚动条代码.zip
07-16
鼠标滚轮滚动条代码是一款支持拖拽跟鼠标滚轮滚动的内容滚动条代码下载。
鼠标滚轮事件代码.txt
07-28
基于鼠标滚轮完成OQ界面图形的放大和缩小
js监听html页面的上下滚动事件
阿亮
06-28 5万+
最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：不多说了，直接上代码了，经过测试可以使用：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <sc
关于JavaScript的鼠标移动事件
drinkingcode
10-10 2万+
前言： ============================= Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 事件句柄： ============================= =============================
鼠标滚轮事件（谷歌或火狐）
m0_57774967的博客
04-18 2041
全部代码： 分部说明： 1.首先在body标签里给个div标签，div里打上鼠标滚轮事件，方便之后在浏览器上，当鼠标滚轮滚动时，就可以明显看出页面有在滚动 2.写div样式。直接在head标签里给个style标签（内部样式），然后用元素选择器给div设置样式，宽度（width）为200像素（px），高度（height）为2000像素（px），背景颜色（background-color）为碧绿色（aquamarine） 3.样式设置好后，就可...
兼容各浏览器获取鼠标滚轮上下滚动事件
xiebiaoling的专栏
10-13 2518
// 滑轮滚动事件 if (document.addEventListener) { document.addEventListener('DOMMouseScroll', pageTurn, false); } window.onmousewheel = document.onmousewheel = pageTurn;
fixed定位的元素及其子元素，滚动鼠标滑轮时无法滚动！
hzxOnlineOk的博客
01-21 3173
刚碰到了一个问题，由于fixed元素是不处于文档流中的，因此，如果你的滚动容器不是html，fixed元素在非html容器中会遮住底层，此时鼠标放在fixed元素上是无法滚动容器内的内容的，所以，最好的解决方式是 都以html为容器进行滚动！ &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset...
tweenmax 根据鼠标滚动事件
最新发布
05-25
TweenMax 是一个 JavaScript 动画库，可用于创建各种类型的动画效果，包括根据鼠标滚动事件触发的动画效果。 要实现根据鼠标滚动事件触发 TweenMax 动画效果，你可以使用 JavaScript 中的事件监听器。具体来说，你可以监听鼠标滚动事件，并根据鼠标滚动的位置来触发 TweenMax 动画效果。 以下是一个示例代码，该代码将根据鼠标滚动事件触发一个 TweenMax 动画效果： ```javascript // 监听鼠标滚动事件 window.addEventListener('scroll', function() { // 获取鼠标滚动的位置 var scrollPosition = window.scrollY; // 根据鼠标滚动的位置设置 TweenMax 动画效果 TweenMax.to('#my-element', 1, { opacity: scrollPosition / 1000, y: scrollPosition / 5 }); }); ``` 在上面的代码中，我们使用 `window.addEventListener()` 函数来监听 `scroll` 事件。当鼠标滚动时，我们获取鼠标滚动的位置，并使用 TweenMax 的 `to()` 函数来设置元素的透明度和垂直位置，从而实现动画效果。 需要注意的是，上面的代码只是一个示例代码，你需要根据具体的需求来设置 TweenMax 动画效果的参数。另外，如果你需要在多个元素上应用 TweenMax 动画效果，你可以在上面的代码中使用 `querySelectorAll()` 函数来获取这些元素，然后在 `to()` 函数中分别设置它们的动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值