Javascript 如何结合滚动效果和鼠标移动_Javascript_Jquery_Html_Css

Javascript 如何结合滚动效果和鼠标移动

javascript jquery html css

Javascript 如何结合滚动效果和鼠标移动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经设法做了一个滚动效果，你可以在这个链接中看到在另一个link（）上，我有另一个发生在鼠标移动时的动画在我的滚动效果之上，我希望第一个图像具有鼠标移动效果。我怎样才能把它们结合起来呢我觉得这很有挑战性，因为两者的造型完全不同。在一个模板中，我在前端处理实际图像，但在另一个模板中，我处理图像背景 JS: HTML Lorem ipsum dolor sit amet，奉献精英。别名ut accusamus无错误实验室，位于圣塔州的康茂德市，该市的所有实验室均应提供最低限度的无官方资格

我已经设法做了一个滚动效果，你可以在这个链接中看到

在另一个link（）上，我有另一个发生在鼠标移动时的动画

在我的滚动效果之上，我希望第一个图像具有鼠标移动效果。我怎样才能把它们结合起来呢

我觉得这很有挑战性，因为两者的造型完全不同。在一个模板中，我在前端处理实际图像，但在另一个模板中，我处理图像背景

JS:

HTML


Lorem ipsum dolor sit amet，奉献精英。别名ut accusamus无错误实验室，位于圣塔州的康茂德市，该市的所有实验室均应提供最低限度的无官方资格的实验室，并提供合理的选择

只需在javascript中添加以下内容：

$('.box2').on('mousemove', function(e){
  var x = e.originalEvent.x,
      y = e.originalEvent.y,
      w = this.offsetWidth,
      h = this.offsetHeight,
      targetX = w / 2 - x,
      targetY = h / 2 - y;

  $(this).css({
    'transform': 'scale(1.2) translate(' + targetX/10 +'px, ' + targetY/10 +'px)'
  });
});

如果您希望两者同时工作，则需要确定是使用图像还是背景图像。我会建议实际图像，因为它更好的搜索引擎优化明智。然后就是将

.on（'wheel hover'）

或

.on（'wheel mouseenter'）

结合起来的问题了，似乎我需要对JavaScript动画和事件了解更多。在哪里可以找到有关鼠标事件和相应句柄等的更多信息？您可以在这里看到所有可能的javascript事件：-有很多：）

html,body,header, #header_box, .image_box, img {
    height: 100%;
}
#firstbox{
  background: red;
    width: 100%;
}

#second_box{
  background: blue;
}

#third_box{
  background: black;
}

.general{
  width: 100%;
  height: 100%;
}

header {
    position: relative;
    overflow: hidden;
}
.image_box{
    position: absolute;
    width: 100%;
}
img{
    width: 100%;
}

.hide_image {
    visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id="firstbox" class="general">
        <header>
            <div id="header_box">
                <div class="image_box">
                    <img class="img1" src="https://cdn.pixabay.com/photo/2017/03/07/13/38/landscape-2124022_960_720.jpg" alt="image here">
                </div>
                <div class="image_box box2">
                    <img class="img2" src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here">
                </div>             
            </div>

        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ut accusamus non error laboriosam in commodi ad, sint, neque voluptates deserunt magnam minima nulla officia nobis fugit enim optio assumenda.</p>
    </div>
    <div id="second_box" class="general">

    </div>

    <div id="third_box" class="general">

    </div>

</body>

$('.box2').on('mousemove', function(e){
  var x = e.originalEvent.x,
      y = e.originalEvent.y,
      w = this.offsetWidth,
      h = this.offsetHeight,
      targetX = w / 2 - x,
      targetY = h / 2 - y;

  $(this).css({
    'transform': 'scale(1.2) translate(' + targetX/10 +'px, ' + targetY/10 +'px)'
  });
});