zoukankan      html  css  js  c++  java
  • 图片鼠标移动缓慢运动效果

    $(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;  100%; height: 100%; }
    
    .partner-bg .partner-scroll { position: absolute; top: 0; left: 0;  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;  100%; height: 100%; }
    .partner-bg .partner-scroll { position: absolute; top: 0; left: 0;  100%; height: 100%; background-position: center 0; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; }
      


    </div>

  • 相关阅读:
    linux cat 文件操作
    linux 如何显示一个文件的某几行(中间几行)
    dvm进程,linux进程,应用程序进程是否同一概念
    android-----JNI中的log打印
    push代码到github时,每次都要输入用户名和密码的问题
    linux下ndk编译命令行程序及配置
    Ubuntu16.04安装openjdk-7-jdk
    JNI——访问数组
    转:MyBatis学习总结(Mybatis总结精华文章)
    转:mybatis3中@SelectProvider的使用技巧
  • 原文地址:https://www.cnblogs.com/aimyfly/p/9089134.html
Copyright © 2011-2022 走看看