Question

我正在尝试将视差效果应用于脚本块，该脚本块在页面加载的基础上旋转图像。它曾经在HTML div的内容是静态<img>时工作。因为Javascript会查找$('#parallaxical img').css，因为用<img>取代静态Randomize()而不再使用<script>，我的视差效果不再起作用。我试过改变很多事情而没有成功。

如何让＆＃34;标题视差效果＆＃34;脚本会查找新的动态<img>块而不是之前的<div class="inner" id="parallaxical"> <script type="text/javascript">Randomize()</script> </div>？

HTML：

#parallaxical {
  width: 100%; height: 300px; overflow: hidden; display: block; position: absolute;
}
#parallaxical img {
  width: 100%; height: auto; min-height: 300px !important; min-width: 1280px !important;
}
#parallaxical h2 {
  margin: -20px 0px 0px; top: 50%; width: 100%; text-align: center; position: absolute;
}
#parallaxical a {
  padding: 0px 20px; color: rgb(221, 221, 221); letter-spacing: 1px; font-size: 24px; background-color: rgba(0, 0, 0, 0.7);
}
#parallaxical a:hover {
  color: rgb(238, 238, 238);
}

CSS：

/*Header parallax effect
======================================================*/
(function($){
  $(document).ready(function(){
    $(window).scroll(function(){
      var window_scroll_position = $(this).scrollTop();
      var parallax_value = window_scroll_position/4;

      $('#parallaxical img').css({
        '-webkit-transform': 'translateY('+ parallax_value +'px)',
        '-moz-transform': 'translateY('+ parallax_value +'px)',
        '-o-transform': 'translateY('+ parallax_value +'px)',
        '-ms-transform': 'translateY('+ parallax_value +'px)',
        'transform': 'translateY('+ parallax_value +'px)'
      });
    });
    $('#parallaxical a').click(function(e){
      var title = $(this).attr('title');
      _gaq.push(['_trackEvent', 'Takeovers', 'Clickthrough to Page', title]);
    });
  });
})(jQuery)

/*Header rotate
======================================================*/
function Randomize() {
    var images = new Array("images/banner/banner1.jpg","images/banner/banner2.jpg","images/banner/banner3.jpg","images/banner/banner4.jpg");
    var imageNum = Math.floor(Math.random() * images.length);
    document.getElementById("parallaxical").style.backgroundImage = "url('" + images[imageNum] + "')";
    document.getElementById("parallaxical").style.backgroundSize = 'cover';
}

window.onload = Randomize;

的Javascript / jQuery的：

{{1}}

Answer 1

这将完成这项工作：

var Randomize = (function() {
    var imageDirectory = 'images/banner/';
    var images = new Array(
        "banner1.jpg",
        "banner2.jpg",
        "banner3.jpg",
        "banner4.jpg"
    );

    return function() {
        //get a random number
        var imageNum = Math.floor(Math.random() * images.length);
        //create the image
        var image = document.createElement('img');
        image.src = imageDirectory + images[imageNum];
        //add it to the containing element
        document.getElementById('parallaxical').appendChild(image);
    }

}());

<强>更改

我把代码包装在一个生活中。
创建了一个imageDirectory变量。看起来更好。

对<script>块</script>的视差效果

1 个答案: