尝试在Javascript中使用鼠标指针编写脚本来推送框 [英] Trying to write a script to push a box using mouse pointer in Javascript
问题描述
我开始学习Javascript，并尝试编写一个脚本，允许用户使用鼠标指针左右推动一个框。
I'm in the beginning of learning Javascript, and trying to write a script that allows the user to push a box left and right using mouse pointer.
当指针接触到盒子的左侧时，我设法解决了这个问题，但我在这里面临两个问题：
I managed to work it out when the pointer touches the left side of the box, but i'm facing two problems here :
- 当指针进入框内时，框跳转到新坐标。当指针进入盒子里面时，我希望盒子保持在它的位置。
- 当鼠标触摸盒子的右侧时，我真的无法理解它。我希望盒子向左推。我已经制作了一个 box.offsetRight 属性来帮助我，但却无法有效地使用它。
- When the pointer gets inside the box, the box jumps to the new coordinate. I want the box to stay in it's position when the pointer gets inside the box.
- I really can't figure it out when the mouse touches the right side of the box. I want the box to get pushed left. I've made a box.offsetRight property to help me out but just can't use it efficiently.
这是一张图片来证明我的意思：
Here's a picture to demonstrate what i mean :
X标记是指针所在的位置。然后朝着盒子的右侧走去。如何将盒子推到左边？
The "X" mark is where the pointer is. And heading toward the right side of the box. How to push the box to the left ?
这是我试过的（当然没有用）：
Here's what i've tried to do (it didn't work of course) :
index.html
<html>
<head>
<title>Chase the box</title>
<style>
body {
}
.css-box{
position: absolute ;
top:20px;
width : 100px;
height : 100px;
background-color : blue;
}
.css-textbox{
margin-top: 500px;
}
</style>
</head>
<body>
<div id="box" class="css-box"></div>
<div class="css-textbox">
<p>All : <input id="allTextbox" type="text"></input></p>
<p>Left : <input id="leftTextbox" type="text"></input></p>
<p>Right : <input id="rightTextbox" type="text"></input></p>
<p>e.pageX(Left) : <input id="pageXTextbox" type="text"></input></p>
<p>e.pageX(Right) : <input id="pageXRightTextbox" type="text"></input></p>
</div>
<script type="text/javascript" src="helper.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
var box = document.getElementById("box");
var allTextbox = document.getElementById("allTextbox");
var leftTextbox = document.getElementById("leftTextbox");
var rightTextbox = document.getElementById("rightTextbox");
var pageXTextbox = document.getElementById("pageXTextbox");
var PageXRightTextbox = document.getElementById("pageXRightTextbox");
Object.prototype.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
var pushBox = function(e){
var pageXRight = window.innerWidth - e.pageX;
box.offsetRight = window.innerWidth - (box.offsetWidth + box.offsetLeft);
if (e.pageX >= box.offsetLeft){
box.style.left = e.pageX + "px";
} else if(pageXRight >= box.offsetRight){
box.style.right = pageXRight + "px";
}
allTextbox.value = window.innerWidth;
leftTextbox.value = box.offsetLeft;
rightTextbox.value = box.offsetRight;
pageXTextbox.value = e.pageX;
pageXRightTextbox.value = pageXRight;
};
box.addEventListener("mousemove" , pushBox);
我希望使用Javascript而不是Jquery找到答案。
I hope to find an answer using Javascript not Jquery.
谢谢。
推荐答案
可能的想法。听起来像我在AS3编写的一些旋转木马。
Possible idea for you. Sounds like some carousels I've coded up in AS3.
- 当鼠标悬停在盒子的div容器上时，你开始检查鼠标位置计时器（相当快）。
- 使用鼠标X，div宽度，框宽度，如果鼠标位于框的左侧或右侧，则可以计算。您可能需要在盒子两侧的远程命中区域，以便当鼠标到达新位置时它会移动。 （我假设你的盒子是容器中的位置相对css，这将允许css：left和css：right通过document.getElementById（xxx）动画.style
- 小心盒子到达左侧和右侧限制，因为你仍然想要一个命中区域。
我建议为数字输出创建一些文本框，以便你可以看到当你的计时器功能检查鼠标位置等时数字如何变化然后你应该能够进行计算。
I would suggest creating a few text boxes for number outputs so you can see how numbers change when your timer function is checking mouse positions etc and then you should be able to make the calculations.
希望这有帮助。
这篇关于尝试在Javascript中使用鼠标指针编写脚本来推送框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
