1. 程式人生 > >圖片鼠標移動緩慢運動效果

圖片鼠標移動緩慢運動效果

mon oop chm ima 移動 CA time part OS

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

圖片鼠標移動緩慢運動效果