图片鼠标移动缓慢运动效果

Posted 2020-11-08 温暖向阳Love

$(function(){
    


        $(".parallax-true").each(function() {
            var b = $(this),
                c = b.attr("data-direction");
            if(c === "horizontal_mouse" || c === "vertical_mouse" || c === "both_axis_mouse") {
                var d = c === "vertical_mouse",
                    e = c === "horizontal_mouse",
                    f = c === "both_axis_mouse";
                if(f === true) {
                    e = true;
                    d = true
                }
                var g = b;
                var h = g.find(".parallax-layer");
                var i = -.004;
                var j = 50;
                var k = 50;
                g.on("mousemove", function(a) {
                    var b = g.offset();
                    var c = e ? a.clientX - b.left - g.width() * .5 : 0;
                    var f = d ? a.pageY - b.top - g.height() * .5 : 0;
                    TweenLite.to(h, 3, {
                        scale: 1.2
                    });
                    TweenLite.to(h, 1, {
                        x: c * j * i,
                        y: f * k * i
                    })
                });
                g.on("mouseleave", function() {
                    TweenLite.to(h, 60, {
                        x: 0,
                        y: 0,
                        scale: 1
                    })
                })
        }     else {
              var b = $(this).find(".bg-layer"),
                  l = b.offset();
               
              b.css("position", "absolute");
              setTimeout(function () {
                 b.each(function () {
                        console.log("1");
                       $(this).parallaxScroll({
                            speed: .2,
                            direction: c
                        })
                 })
             }, 1000)
          }
        })
        
        
})

<div class="cooperative-partner parallax-true" data-intro-effect="false" data-direction="horizontal_mouse">
<div class="partner-bg bg-layer">
<div class="partner-scroll parallax-layer" data-invert="true" style="background-image:url(/templates/common/images/wimg06.jpg);"></div>
</div>

.cooperative-partner { position: relative; overflow: hidden; padding: 35px 0; }

.partner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.partner-bg .partner-scroll { position: absolute; top: 0; left: 0; width: 130%; height: 100%; background-position: center 0; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; -webkit-transition: all ease 0.7s; -o-transition: all ease 0.7s; -moz-transition: all ease 0.7s; transition: all ease 0.7s; background-attachment: scroll; }

.partner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.partner-bg .partner-scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center 0; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; }
  

 

</div>