Question

Heyo，

前几天我正在寻找parallax mousemove script并找到了这个脚本：

$(document).ready(function () {
    $('#div1').mousemove(function (e) {
        parallax(e, this, 0.5);
        parallax(e, document.getElementById('div2'), 1);
        parallax(e, document.getElementById('div3'), 1.5);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

* {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  width: 100%;
  height: 100%;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: orange;
}

#div3 {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="div2"></div>
  <div id="div3"></div>
</div>

现在，当鼠标不再悬停在div1上时，我想将脚本重置为默认位置。我该怎么做？

提前致谢！

P.S。如果有更好的Script用于此目的，请随意发布。

Answer 1

这不是最佳答案，但这可能仍然以最小的方式实现您的目标，

对您的css使用transition和div效果。

参见示例代码。

单独使用CSS，

.yourDiv{
   /* Put your default styling here */
   transition:2s;
}

.yourDiv:hover{
   /* Put your hover effect here */
   margin-left:10px;
   transition:2s;
}

在div上的mouseOut上，它将以默认样式显示div并具有过渡效果。

当鼠标不再悬停在div

1 个答案: