Вставьте элемент в div в зависимости от позиции ввода мыши - PullRequest
Новая
       34

Вставьте элемент в div в зависимости от позиции ввода мыши

1 голос
/ 28 июля 2011

Я бы хотел вставить элемент внутрь элемента div, но позиция скольжения должна изменяться. 

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

Если пользователь вводит элемент div слева, элемент должен скользить слева, если справаэлемент должен скользить справа, то же самое для других сторон.

Также для top / bottom мне потребуется сохранить переменную, сторону, с которой пользователь ввел div, и вызвать функцию в зависимости от значения переменной.

Как можноЯ определяю направление / положение?Я использую библиотеку jQuery, но простой JavaScript также приемлем.

Ответы [ 2 ]

1 голос
/ 28 июля 2011

По сути, вам нужно использовать 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>

(извините за ожидание;)

0 голосов
/ 28 июля 2011

Вот мой обновленный пример, он не проверен - однако он должен работать.

$(".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;
}
...