根据鼠标输入位置在 div 内滑动元素答案

【问题标题】：Slide element inside a div depending of the mouse entry position根据鼠标输入位置在 div 内滑动元素
【发布时间】：2011-07-28 12:46:51
【问题描述】：

我想在一个 div 中滑入一个元素，但滑动位置应该不同。

<div class="block">
    <div class="hover">…</div>
</div>

如果用户从左侧进入 div，则元素应从左侧滑入，如果从右侧进入，则元素应从右侧滑入，其他边也一样。

对于顶部/底部，我需要保存到一个变量，即用户输入 div 的一侧并根据变量的值触发一个函数。

如何确定方向/位置？我使用的是 jQuery 库，但纯 JavaScript 也是可以接受的。

【问题讨论】：

到目前为止你有什么？
您是试图在“block”中移动“hover”还是“block”容器以进行“hover”并且您正在悬停移动元素。另外，滑动元素是否附加到鼠标移动事件？或者，一旦您将鼠标悬停，它就会设置动画，并且您停止鼠标不会影响结果。

标签： javascript jquery mouse position slide

【解决方案1】：

基本上，您需要做的是使用 jQuery 的 mouseover 并从事件对象中获取 clientX 和 clientY。然后将该信息与 offset()、height() 和 width() 结合使用，以确定它们来自<div> 的哪一侧。示例：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
  <body>
  <div id="box" style="width:200px;height:200px;background:red;position:absolute;top:100px;left:100px;"><div id="cover" style="position:absolute;background:blue;width:0;height:0;overflow:hidden;z-index:50;"></div></div>

    <script>
$(function(){
  var $box = $('#box').mouseenter(function(event){
    // coming from the top
    if (Math.abs(event.pageY - offset.top) < 10) {
      $cover.css('width',width).animate({
        height:height
      })
    }
    //coming from the left
    else if (Math.abs(event.pageX - offset.left) < 10) {
      $cover.css('height',height).animate({
        width:width
      })
    }
    //coming from the bottom
    else if (Math.abs(event.pageY - (offset.top + height)) < 10) {
      $cover.css({
        width:width,
        top:'auto',
        bottom:0
      }).animate({
        height:height
      })
    }
    //coming from the right
    else {
      $cover.css({
        height:height,
        left:'auto',
        right:0
      }).animate({
        width:width
      })
    }
  }).mouseleave(function(){
    // reset it
    $cover.css({
      width:0,
      height:0,
      bottom:'auto',
      right:'auto',
      left:'auto',
      top:'auto'
    })
      }), $cover = $('#cover'), offset = $box.offset(), width = $box.width(), height = $box.height()
})
</script>
</body>
</html>

（抱歉让您久等了；）

【讨论】：

是的。那将非常有用，谢谢亚伯拉罕！我想在这个网站上做类似的事情：lippincott.com/work 如果这有助于你想象我想要做什么
好的，我明白了。当您将鼠标悬停在图块上时，覆盖层会从您来自的任何方向滑入。我现在很忙，但可能一个小时后我就有空了。我在jsFiddle上发个例子好吗？
抱歉，没时间早点完成。将在今晚发布。

【解决方案2】：

这是我更新的示例，它未经测试 - 但是它应该可以工作。

$(".block").mouseenter(function(event){
  if(!$(".hover").is(":animated")){
        if(event.pageX > ($(".block").position().left + ($(".block").width()/2)))
        {
              $(".hover").css("left", "-100px");
        } else {
              $(".hover").css("left", "200px");
        {
        $(".hover").animate({ left : 0 },300);
  }
});

css

.block {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-color: #fff;
}
.block .hover {
  position: absolute;
  left: -100px;
  height: 100px;
  width: 100px;
  background-color: #00f;
}

【讨论】：

注意，如果鼠标越过中心位置，这将从“左”更新为“右”。仅当您在悬停时运行动画并且不将幻灯片绑定到容器内的鼠标位置时，这才会有效。否则你会进入幻灯片的一半，它会认为你正在从另一端重新开始。
我明白了。谢谢你。我想在用户输入 div 时立即开始动画。基本上我想在这个网站上做类似的事情：lippincott.com/work将鼠标悬停在盒子上
我还将 hover 事件更改为 mouseenter 和 mouseleave 事件。