javascript - 如何使自定义跟随光标跟随Y轴滚动-6ren

javascript - 如何使自定义跟随光标跟随Y轴滚动

转载作者：行者123 更新时间：2023-11-28 14:33:07

25

4

我在我的 squarespace 网站上使用了一些 HTML 和 CSS 来创建自定义跟随光标。我只想有一个不显示实际光标的 float 圆圈。我已经让它大部分工作了，但是当我的网站滚动时，跟随光标不会随着页面滚动而移动，而是卡在顶部。

这只会导致跟随光标完全停止随鼠标移动而移动，在页面中心变为静止状态。

将 HTML 和 CSS 注入(inject)到 squarespace 网站以创建自定义跟随光标:

body {
     background: #161616;
}

.wrap {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     overflow: hidden;
}

#ball {
     width: 60px;
     height: 60px;
     background: none;
     border: 1px solid grey;
     border-radius: 50%;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -10px 0 0 -10px;
     pointer-events: none;
}

<body onload="followMouse();">
     <div class="wrap">
          <div id="ball"></div>
     </div>
     <script type="text/javascript">

         var $ = document.querySelector.bind(document);
         var $on = document.addEventListener.bind(document);
         var xmouse, ymouse;

         $on('mousemove', function (e) {
             xmouse = e.clientX || e.pageX;
             ymouse = e.clientY || e.pageY;
         });

         var ball = $('#ball');
         var x = void 0,
             y = void 0,
             dx = void 0,
             dy = void 0,
             tx = 0,
             ty = 0,
             key = -1;
      
         var followMouse = function followMouse() {
             key = requestAnimationFrame(followMouse);

             if(!x || !y) {
                 x = xmouse;
                 y = ymouse;
             } else {
                 dx = (xmouse - x) * 0.125;
                 dy = (ymouse - y) * 0.125;

                 if(Math.abs(dx) + Math.abs(dy) < 0.1) {
                      x = xmouse;
                      y = ymouse;
                 } else {
                      x += dx;
                      y += dy;
                 }
             }
          
             ball.style.left = x + 'px';
             ball.style.top = y + 'px';
         };

     </script>
</body>

最佳答案

[编辑] 更新你的问题做得很好，演示和问题现在都非常清楚了。不要担心你的演示没有滚动，我只是在我的演示中添加了一堆具有一定高度的 div 来模拟它。这是您需要/应该更改以使其全部正常工作的所有内容:

var followMouse = function followMouse() ... 是非常奇怪的语法，我不确定确切的结果是什么。
- 要么正常声明函数 function followMouse() ...，要么使用以下任一方式将其存储在变量中:
  - 函数定义 var followMouse = function() ... 或
  - 箭头定义 var followMouse = () => ...
要简单地使其全部正常工作，您只需调整文档的当前滚动量，或者在我的演示案例中调整类为“.wrap”的元素。
- 这可以使用 $() 函数返回的对象的 scrollTop 成员来完成。
- 我首先将 $(".wrap").scrollTop 添加到 mousemove 监听器中的 ymouse 变量，但是虽然这它需要您将鼠标移动到圆圈上才能实现它已滚出页面。
- 因此，我们只是将 $(".wrap").scrollTop 添加到在 followMouse 的最后几行中设置为球的 css。<
我将 overflow 属性从 hidden 更改为 scroll 因为这就是问题发生的地方 ;)
我还在您的 .wrap CSS 中添加了 cursor: none，这样您就可以获得没有光标但只有自定义光标的预期效果。

var $ = document.querySelector.bind(document);
var $on = document.addEventListener.bind(document);
var followMouse = function() {
  key = requestAnimationFrame(followMouse);

  if (!x || !y) {
    x = xmouse;
    y = ymouse;
  } else {
    dx = (xmouse - x) * 0.125;
    dy = (ymouse - y) * 0.125;
    if (Math.abs(dx) + Math.abs(dy) < 0.1) {
      x = xmouse;
      y = ymouse;
    } else {
      x += dx;
      y += dy;
    }
  }
  ball.style.left = x + 'px';
  ball.style.top = $(".wrap").scrollTop + y + 'px';
};

var xmouse, ymouse;
var ball = $('#ball');
var x = void 0,
  y = void 0,
  dx = void 0,
  dy = void 0,
  tx = 0,
  ty = 0,
  key = -1;

$on('mousemove', function(e) {
  xmouse = e.clientX || e.pageX;
  ymouse = e.clientY || e.pageY;
});

body {
  background: #161616;
}

.wrap {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: scroll;
  cursor: none;
}

#ball {
  width: 60px;
  height: 60px;
  background: none;
  border: 1px solid grey;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
  pointer-events: none;
}

.makeOverflow {
  width: 100px;
  height: 300px;
}

<body onload="followMouse();">
  <div class="wrap">
    <div id="ball"></div>
    <div class="makeOverflow"> </div>
    <div class="makeOverflow"> </div>
    <div class="makeOverflow"> </div>
    <div class="makeOverflow"> </div>
  </div>
</body>

关于javascript - 如何使自定义跟随光标跟随Y轴滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53925568/

25

4

0

文章推荐： html - CSS 菜单在 IE6 中不显示子 UL

文章推荐： css - DIV/表格对齐

文章推荐： css - firefox 中的 webfonts 和 IE 中的链接问题

部分透明图像上的 WPF 光标
我有一个包含透明区域的 png，并将其设置为图像标签。当光标位于图像的不透明部分上时，如何将光标设置为手？谢谢最佳答案为此，您需要查看位图本身。 WPF 的 HitTest 机制认为任何使用“
java - 如何隐藏手/光标？
我想隐藏圆形仪表的手(那就是中间的东西，对吧？)。到目前为止，我尝试过: myCircularGauge.getHand().setVisible(false); 但是，绘制图表时这似乎会产生崩溃。如
javascript - 光标:鼠标抓取javascript
我有两张图片:一张是张开的手，一张是抓着的手。我希望一个简单的“onmousedown”和“onmouseup”函数有助于制作出著名的抓手，您可以在类似谷歌地图的东西中看到它。但...抱歉，从头开始:
mysql - 序列化迁移 - 光标
是否可以在sequelize迁移中使用光标？我正在尝试创建 DML 脚本，其想法是循环表中的值，即。使用游标输入日期，然后将值插入到其他表中，即。光标内的膳食日。 table : day dayId
python - 光标.执行值子字符串不起作用
我正在尝试使用格式加载值 +02:00 - mysql> select SUBSTR('2016-01-12T14:29:31.000+02:00',24,6); +02:00
javascript - 在内容可编辑的段落中存在的粗体元素内设置插入符号(光标)
我一直在尝试构建一个基于网络的文本编辑器。作为该过程的一部分，我正在尝试动态创建和修改基于元素的事件和用于字体编辑的击键事件。在这个特别的jsfiddle示例我试图在按下 CTRL+b 并将焦点/插
vim - 在函数后移动 vim 光标
我同时使用了 supertab 和 snipmate 插件。假设我正在使用 snipmate 创建一个 if 语句结构。在 if 语句中完成添加语句后，如何快速将光标移动到 if 语句之后。例如: i
Blackberry - 自定义 EditField 光标
我正在为我的 BlackBerry 项目创建一个搜索框，但看起来 BlackBerry 没有用于创建单行 EditField 的 API。我通过扩展 BasicEditField 和覆盖布局和绘制等方
html - 如何在禁用的链接上获取 “not-allowed” 光标
我想知道如何获得 not-allowed光标在我禁用的链接上。我试图将它添加到禁用事件中，但它在那里不起作用，然后我尝试使用相同的光标事件引入悬停效果。关于如何让它发挥作用的任何想法？我在这里包含了我
delphi - Firemonkey 中的屏幕.光标
在 Delphi 6 中，我可以使用 Screen.Cursor 更改所有表单的鼠标光标: procedure TForm1.Button1Click(Sender: TObject); begin
javascript - 光标 foreach 按时间间隔
这个 Meteor 服务器代码需要每 n 秒从集合中打印一次文档，我该如何让它工作？谢谢 myCol.find({abc: undefined}).forEach( fun
javascript - 表单发布返回文件时显示 'wait' 光标
在这个论坛上花了相当长的时间寻找与我的问题类似的答案，但找不到符合我的情况的答案。我有一个 HTML 表单，通过 javascript 将其提交到我的 aspx 页面。 function Submi
javascript - 创建透明的 HTML 光标
是否可以在网页上创建透明的 HTML 光标？我使用 div 作为光标，我想让 div 50% 透明: http://jsfiddle.net/mCgmP/16/ I want this cursor
android - 光标 movetofirst() 和空指针异常
我正在使用 Cursor 来获取存储在我的 SQLite 数据库中的一些数据。当我的光标有数据库中的一些数据时，代码可以正常工作。但是，当 Cursor 不包含任何数据时，我在 Cursor.move
java - 在屏幕上的任何位置隐藏 Java 光标
我希望隐藏特定范围的 x 和 y 位置中的光标。这是一些示例代码，代表了我想要做的事情。 if(x >= xLowerBound && x = yLowerBound + 20 && y = xLow
java - 等待 JavaScript 光标
我有一个 .jsp 页面，用户可以在其中输入信息，然后使用保存按钮保存。该应用程序可以运行，但由于按钮的单击事件正在运行 Java 代码，然后将保存的信息添加到 Oracle 数据库，因此需要一些时间
java - Android 光标.moveBeforeFirst()
为什么 Android 中 Cursor 没有 moveBeforeFirst()？其他风格的 Java 中也有类似的方法，如果您需要重新迭代结果集(例如，在 while(cursor.moveTo
python - 抓取 Tkinter 光标
我想使用 Tkinter 捕获相对鼠标运动。我附上一个监听器并且能够获取鼠标移动。但是，我希望能够“捕获”/“锁定”光标，使其不可见并且无法离开窗口(就像游戏一样)。我的目标是获得相对鼠标移动而不受窗
java - 光标!= null 但null？
当应用程序同步时，我尝试更新数据库中每一行的“html”列。我用过这个教程Here将应用程序添加到“配置文件”列表中。这是我在 SyncAdapter 中使用的代码: private static v
javascript - 光标 : crosshair; for buttonImg
我正在使用 Uploadify带有图像按钮。一切正常。除了，我需要在鼠标悬停时使用 cursor:crosshair; 而不是 cursor:default;。我试着在 CSS 中这样设置它: ob

首页

博学

6Ren·AI

商城

javascript - 如何使自定义跟随光标跟随Y轴滚动