Question

我在this tutorial之后实现了水平视差背景。

我希望垂直具有相同的效果。请帮助。

到目前为止，这是我的代码，

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            var currentX = '';
            var movementConstant = .015;
            $(document).mousemove(function(e) {
                if(currentX == '') currentX = e.pageX;
                var xdiff = e.pageX - currentX;
                currentX = e.pageX;
                $('.parallax div').each(function(i, el) {
                    var movement = (i + 1) * (xdiff * movementConstant);
                    var newX = $(el).position().left + movement;
                    $(el).css('left', newX + 'px');
                });
            });
        </script>
        <style>
            .parallax {
                position: absolute;
                width: 100%;
                height: 800px;
                overflow: hidden;
                left: 0;
            }
            .water {
                position: absolute;
                width: 100%;
                height: 800px;
                left:0;
                background-repeat: no-repeat;
                background-position: top center;
            }
            .water-layer1 {
                background-image: url(water-layer-1.png);
            }
            .water-layer2 {
                background-image: url(water-layer-2.png);
            }
            .water-layer3 {
                background-image: url(water-layer-3.png);
            }
            .water-layer4 {
                background-image: url(water-layer-4.png);
            }
        </style>


    </head>

    <body>
        <div class="parallax">
            <div class="water water-layer4"></div>
            <div class="water water-layer3"></div>
            <div class="water water-layer2"></div>
            <div class="water water-layer1"></div>
        </div>
    </body>
</html>

Answer 1

我在手机上，所以我无法测试......试试这个：

<script>
  var currentY = ''; 
  var movementConstant = .015;

  $(document).mousemove(function(e) { if(currentY == '') currentY = e.pageY; 

  var ydiff = e.pageY - currentY; 
  currentY = e.pageY;

  $('.parallax div').each(function(i, el) { var movement = (i + 1) * (ydiff * movementConstant); 

  var newY = $(el).position().top + movement; $(el).css('top', newY + 'px'); }); });     
 </script>

JQuery视差背景移动与鼠标悬停

1 个答案: