Question

如何用鼠标位置移动溢出的元素？我有一个500px宽度的div元素。我在该500px div内还有另一个div元素，其宽度为700px。现在，我希望第二个div通过鼠标移动来更改位置。

当鼠标位于主div元素的左侧时，第二个div元素应显示在左侧。

当鼠标位于主div元素的中心时，第二个div元素应显示在中心。

当鼠标位于主div元素的右侧时，第二个div元素应显示在右侧。

.main-wrap {
	height: 200px;
	width: 300px;
	background-color: red;
	overflow: hidden;
	position: relative;
}

.element {
	position: absolute;
	left: 0;
	top: 25px;
	height: 150px;
	width: 700px;
	background-color: green;
}

<div class="main-wrap">
    <div class="element"></div>
</div>

Answer 1

如果我正确理解了您想做什么，则可以创建一个mousemove函数，该函数将红色元素沿光标的相反方向移动。

这是一个小提琴：http://jsfiddle.net/collederfomento/y53o6z7f/18/ 首先，您获取文档的宽度：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <textarea id="tawktouser" rows="4" class="form-control">
name
abc@gmail.com
11111
  </textarea>
  <button type="button" id="add" class="btn green">Add</button>
</form>
<script>
  $(document).ready(function() {
    $("#add").click(function() {
      var tawktouser = $("#tawktouser").val().split('\n');
      alert(tawktouser[0])
    });
  });
</script>

然后创建mousemove函数：

var vW = $(window).width();

该函数的第一行检索光标的X位置（从-50（屏幕左侧）到50（右侧））并将其存储为变量mW。

第二行采用mW变量，并将红色元素沿相反方向移动一半（当然您可以更改）。

如何在jQuery中使用鼠标位置移动溢出的元素

1 个答案: