非常基本

Question

我是Javascript的新手，通常只是作为CSS / HTML中的设计师（以及偶尔剪切/粘贴预编写的JS）但除了JS以外无法看到我实现的目标。有一个去....但失败了！

我想要实现的是一个包含更大的孩子的父母，将鼠标移动到父母的边缘将在该方向上滚动（想想第一人称视频游戏类型效果），最终目标是给予站在房间中间，环顾四周的效果。（目前，孩子只是渐变填充来测试并保持代码短暂，直到我开始工作）

经过几天的谷歌搜索我想到的每一个单词的组合，而不是找到我想要的东西，我已经找到了我能在stackoverflow上得到的最接近的答案并尽可能地将它拼凑在一起......但是（具有严峻的可预测性）它不起作用！

所以我正在寻找的是任何东西，从有人给我我需要的代码提示或指向我做错了。我的代码在下面全部显示以及Codepen的链接显示它不起作用:(

奖金问题：一旦我完成了这项工作，我的下一个目标就是如此，如果你向左或向右滚动它会跳到另一端（例如向右滚动＆gt; 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>

Answer 1

为ya工作：示例在这里（我确定你可以修复它的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);
});

Answer 2

非常基本

当鼠标在内移动 .outer <div>时，mousemove event触发器及其event参数提供（以及其他值）光标的pageX和pageY位置。

使用getComputedStyle，我们可以获得width和height的{{1}}和.inner，并计算.outer和{{1} } width与height的比率虽然我们已经知道这一点，但是因为我们在CSS中设置了值，所以在实际应用中计算这些值可能会很有用。

我们可以将.inner .outer的{{1}}和scrollLeft值设置为规范化 scrollTop和{{1 }}值乘以相关比率，滚动孩子的左边和上边缘更接近或远离父母的左上角。

即如果光标在靠近底部的最右侧移动，.outer的{{1}}和<div>值将更接近实际值evt.x evt.y的{{1}}和x，因此y值（乘以先前建立的比率）将更接近其最大值，因此更接近到相应卷轴的末尾。

这个简单的演示不会考虑layout offsets，如何获取/计算这些将取决于实际应用。

＆＃13;

mousemove event

＆＃13;

width

＆＃13;

height

＆＃13;

如何通过将鼠标悬停在<div>上来使div（任何方向）滚动？

2 个答案:

非常基本