Question

正如您在此链接here中所看到的，我设法做到了滚动效果。

在另一个链接（see here）上，我还有另一个鼠标移动时发生的动画。

除了滚动效果外，我还希望第一张图像具有鼠标移动效果。我该如何结合呢？

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

JS：

var zoom_value = 1;
var boxFullHeight = $('header').height();
var boxHalfHeight = $('header').height() / 2;
var domHeight = $('html').scrollTop();

//scrollController will check the value when scrolling up or down
var scrollController = 0;

//max number that the scroll happens before images change
var max_scrollController = 4;

//this will enable/disable the scrollbar after a certain period
var controller = 0;

$(window).on('wheel', function(e) {

    var delta = e.originalEvent.deltaY;

    function add_styling(zoom_value){
         $("#firstbox img").css({
            "font-size": zoom_value +"px",
            "transform": "scale(" + zoom_value + ")",
            "transition": "all .9s"
        });               
    }

    if (delta > 0 && controller < 10){ 
        controller++;
        zoom_value = zoom_value + 0.1;  
        scrollController++;
        add_styling(zoom_value);

        if(scrollController >= max_scrollController){
            $('.img2').addClass('hide_image');
        }
        return false;
    }
    else if(delta < 0) {
        if (zoom_value > 1) {
            controller--;
            zoom_value = zoom_value - 0.1;
            scrollController--;

            add_styling(zoom_value);
            if(scrollController < max_scrollController){
                $('.img2').removeClass('hide_image');
            }
        }
        else{
            zoom_value = 1;
            add_styling(zoom_value);
        }
    }

});

CSS：

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;
}

HTML

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

Answer 1

只需将其添加到您的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)'
  });
});

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

1 个答案: