Javascript 根据鼠标输入位置在div内滑动元素_Javascript_Jquery_Mouse_Position_Slide

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

javascript jquery

Javascript 根据鼠标输入位置在div内滑动元素,javascript,jquery,mouse,position,slide,Javascript,Jquery,Mouse,Position,Slide,我想在div中的元素中滑动，但是滑动位置应该有所不同 <div class="block"> <div class="hover">…</div> </div> … 如果用户从左侧输入div，则元素应从左侧滑动，如果从右侧滑动，则元素应从右侧滑动，其他侧也是如此同样对于top/bottom，我需要保存到一个变量，即用户输入div的那一侧，并根据变量的值触发一个函数如何确定方向/位置？我使用的是jQuery库，但也可以使用纯Java

我想在div中的元素中滑动，但是滑动位置应该有所不同

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

…

如果用户从左侧输入div，则元素应从左侧滑动，如果从右侧滑动，则元素应从右侧滑动，其他侧也是如此

同样对于top/bottom，我需要保存到一个变量，即用户输入div的那一侧，并根据变量的值触发一个函数

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

基本上，您需要做的是使用jQuery的

鼠标盖

并从事件对象获取clientX和clientY。然后将该信息与offset（）、height（）和width（）结合使用，以确定它们来自

的哪一侧。例如：

<!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>


$（函数（）{
var$box=$（'#box'）.mouseenter（函数（事件）{
//自上而下
if（数学绝对值（event.pageY-offset.top）<10）{
$cover.css（'width'，width）.动画({
高度：高度
})
}
//从左边来
else if（Math.abs（event.pageX-offset.left）<10）{
$cover.css（'height'，height.）。动画({
宽度：宽度
})
}
//自下而上
否则如果（Math.abs（event.pageY-（offset.top+height））<10）{
$cover.css({
宽度：宽度，
顶部：'自动'，
底部：0
}).制作动画({
高度：高度
})
}
//来自右边
否则{
$cover.css({
高度:高度,，
左：'自动'，
右：0
}).制作动画({
宽度：宽度
})
}
}).mouseleave（函数（）{
//重置它
$cover.css({
宽度：0，
高度:0,，
底部：'自动'，
右：'自动'，
左：'自动'，
顶部：“自动”
})
})，$cover=$（“#cover”），offset=$box.offset（），width=$box.width（），height=$box.height（）
})

（抱歉等待；）

基本上，您需要做的是使用jQuery的

mouseover

并从事件对象获取clientX和clientY。然后将该信息与offset（）、height（）和width（）结合使用，以确定它们来自

的哪一侧。例如：

<!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>


$（函数（）{
var$box=$（'#box'）.mouseenter（函数（事件）{
//自上而下
if（数学绝对值（event.pageY-offset.top）<10）{
$cover.css（'width'，width）.动画({
高度：高度
})
}
//从左边来
else if（Math.abs（event.pageX-offset.left）<10）{
$cover.css（'height'，height.）。动画({
宽度：宽度
})
}
//自下而上
否则如果（Math.abs（event.pageY-（offset.top+height））<10）{
$cover.css({
宽度：宽度，
顶部：'自动'，
底部：0
}).制作动画({
高度：高度
})
}
//来自右边
否则{
$cover.css({
高度:高度,，
左：'自动'，
右：0
}).制作动画({
宽度：宽度
})
}
}).mouseleave（函数（）{
//重置它
$cover.css({
宽度：0，
高度:0,，
底部：'自动'，
右：'自动'，
左：'自动'，
顶部：“自动”
})
})，$cover=$（“#cover”），offset=$box.offset（），width=$box.width（），height=$box.height（）
})

（抱歉等待；）

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

$(".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").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”中移动“hover”，或者“block”是“hover”的容器，并且您正在移动“hover”中的元素。此外，滑动元素是否附加到鼠标移动事件？或者，一旦你将鼠标悬停，它将设置一个运动中的动画，而你停止鼠标将不会影响结果。到目前为止，你有什么发现？你是试图在“块”中移动“悬停”，还是“块”是“悬停”的容器，而你正在移动悬停中的元素。此外，滑动元素是否附加到鼠标移动事件？或者，一旦您悬停，它将设置一个运动中的动画，您停止鼠标将不会影响结果。请注意，如果鼠标爬过中心位置，这将从“左”更新为“右”。只有在悬停时运行动画且未将幻灯片绑定到容器中的鼠标位置时，此选项才有效。否则，你会滑到一半，它会认为你是从另一端重新开始的。我明白了。非常感谢。我想在用户进入div时立即启动动画。基本上，我想在这个站点上执行类似操作：将鼠标悬停在盒子上。我还会将悬停事件更改为mouseenter和mouseleave事件。注意，如果鼠标爬过中心位置，这将从“左”更新为“右”。只有在悬停时运行动画且未将幻灯片绑定到容器中的鼠标位置时，此选项才有效。否则，你会滑到一半，它会认为你是从另一端重新开始的。我明白了。非常感谢。我想在用户输入div时立即启动动画。基本上，我想在这个站点上执行类似操作：将鼠标悬停在盒子上。我还会将鼠标悬停事件更改为mouseenter和mouseleave事件。是的。那将是非常有用的，谢谢亚伯拉罕！我想在这个网站上做一些类似的事情：如果这有助于你想象我想做什么，我明白了。当您将鼠标悬停在平铺上时，覆盖层将从您所处的任何方向滑入。我现在很忙，但可能一小时后我就有空了。我将在JSFIDLE上发布一个示例，好吗？对不起，没有时间提前完成。我会在今晚寄出。是的。那将是非常有用的，谢谢亚伯拉罕！我想在这个网站上做一些类似的事情：如果这有助于你想象我想做什么，我明白了。当您将鼠标悬停在平铺上时，覆盖层将从