个人中心
gpt4 book ai didi

javascript - 如何通过将鼠标悬停在子
上来让 div 滚动(任意方向)？

转载 作者：行者123 更新时间：2023-12-01 03:25:36 25 4
gpt4 key购买 nike

我对 Javascript 完全陌生，通常只是作为 CSS/HTML 的设计师(以及偶尔剪切/粘贴预先编写的 JS 片段)，但除了 JS 之外看不到其他任何东西来实现我所追求的目标，所以尝试过……但失败了!

我想要实现的是一个父级，其中包含一个更大的子级，因此将鼠标移动到父级的边缘会将其朝那个方向滚动(想想第一人称视频游戏类型的效果)，最终目标是给出站在房间中央环顾四周的效果。 (目前的 child 只是梯度填充来测试并保持代码简短，直到我让它工作)

经过几天的谷歌搜索我能想到的每一个单词组合来找到这个，但没有找到我想要的，我在 stackoverflow 上找到了最接近的答案，并尽我所能地将它们拼凑在一起......但是(具有严峻的可预测性)它不起作用!

所以我正在寻找的是从某人给我我需要的代码到提示或指向我做错了什么的任何东西。我的代码如下所示，并附有 Codepen 的链接，显示它不起作用:(

额外问题:一旦我完成了这个工作，我的下一个目标就是做到这一点，如果你一直向左或向右滚动，它会跳到另一端(例如，向右滚动> 100％会将你带到最左边div)所以一旦与在房间里相关，你可以转 360^o 然后继续...还没有开始看这个，但我想我现在会完成它，以防万一 a)它会被束缚在第一部分的脚本中，或者b)它根本不可能，你可以节省我很多时间来尝试查找如何做到这一点。

<小时/>

<强> Codepen

<小时/> 
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>TEST</title>
<style media="screen" type="text/css">

html{
position:relative;
font-size:62.5%;
margin:0;
padding:0;
width:100%;
}

body{
position:relative;
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
background:blue;
}

#container{
position:relative;
box-sizing:border-box;
width:calc(100vw - 4rem);
height:calc(100vh - 4rem);
overflow: hidden;
margin-left:2rem;
margin-top:2rem;
}

#content{
width:200vw;
height:200vh;
background: #ff0000;
background: -moz-linear-gradient(-45deg, #ff0000 0%, #00ff00 50%, #0000ff 100%);
background: -webkit-linear-gradient(-45deg, #ff0000 0%,#00ff00 50%,#0000ff 100%);
background: linear-gradient(135deg, #ff0000 0%,#00ff00 50%,#0000ff 100%);
}

#hoverleft{
position:absolute;
cursor:pointer;
left:0;
top:0;
width:5rem;
height:100%;
background:rgba(0,0,0,0.5);
-webkit-clip-path: polygon(0 0, 100% 5rem, 100% calc(100% - 5rem), 0% 100%);
clip-path: polygon(0 0, 100% 5rem, 100% calc(100% - 5rem), 0% 100%);
}

#hoverright{
position:absolute;
cursor:pointer;
right:0;
top:0;
width:5rem;
height:100%;
background:rgba(0,0,0,0.5);
-webkit-clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 calc(100% - 5rem));
clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 calc(100% - 5rem));
}

#hoverup{
position:absolute;
cursor:pointer;
left:0;
top:0;
width:100%;
height:5rem;
background:rgba(250,250,250,0.5);
-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 5rem) 100%, 5rem 100%);
clip-path: polygon(0 0, 100% 0, calc(100% - 5rem) 100%, 5rem 100%);
}

#hoverdown{
position:absolute;
cursor:pointer;
left:0;
bottom:0;
width:100%;
height:5rem;
background:rgba(250,250,250,0.5);
-webkit-clip-path: polygon(5rem 0, calc(100% - 5rem) 0, 100% 100%, 0 100%);
clip-path: polygon(5rem 0, calc(100% - 5rem) 0, 100% 100%, 0 100%);
}

</style>
<script type="text/javascript">

var amount = '';

function scroll() {
    $('#container').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
        scroll();
        }
    });
}
$('#hoverup').hover(function() {
    amount = '+=10';
   scroll();
}, function() {
   amount = '';
});
$('#hoverdown').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});


var amount = '';

function scroll() {
    $('#container').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('#hoverleft').hover(function() {
    amount = '+=10';
    scroll();
}, function() {
    amount = '';
});
$('#hoverright').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});

</script>


</head>
<body>

<div id="container">

  <div id="content">
  </div>

  <div id="hoverleft"></div>
  <div id="hoverright"></div>
  <div id="hoverup"></div>
  <div id="hoverdown"></div>

</div>

</body>  

</html>

最佳答案

让它为你工作:这里的例子(我相信你可以修复它的CSS部分以对齐边框)https://codepen.io/anon/pen/vZdwyg

基本上需要更改的是您只需要声明一次滚动函数，然后每隔一段时间调用它一次，而不仅仅是一次。

下面是新的滚动功能的工作原理以及如何将其应用于悬停，然后我没有使用悬停方法，而是使用 mouseenter 和 mouseleave 来组合所有方向的 mouseleave 事件

var scrolling;
var $container = $('#container');

function scroll(isLeft, neg) {
  var oldScroll = isLeft ? $container.scrollLeft() : $container.scrollTop()
  var newScroll = neg ? oldScroll -= 100 : oldScroll += 100;

  if(isLeft) {
    $container.animate({
      scrollLeft: newScroll
    }, 100, 'linear');
  } else {
    $container.animate({
      scrollTop: newScroll
    }, 100, 'linear');
  }
}

$('#hoverup').on('mouseenter', function() {
  scrolling = setInterval(function() {
    scroll(false, true)
  }, 100);
});

// similar thing for each of the directions, changing true/false around

$('#hoverup, #hoverdown, #hoverleft, #hoverright').on('mouseleave', function() {
    clearInterval(scrolling);
});

关于javascript - 如何通过将鼠标悬停在子 <div> 上来让 div 滚动(任意方向)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44850926/

25 4 0
文章推荐： javascript - req.body 未定义多部分
文章推荐： Laravel 关系 - 在 View 中访问相关值
文章推荐： django - 如何使用 Django channel 进行 HTTP 长轮询
文章推荐： javascript - 我如何缩短这段将圆圈变成数组的代码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com