javascript - <script> block 的视差效果

Question

我正在尝试将视差效果应用于脚本 block ，该脚本 block 根据页面加载旋转图像。它曾经在 HTML div 的内容为静态 <img> 时起作用.因为 Javascript 寻找 $('#parallaxical img').css由于替换了静态 <img>，它不再被使用与 Randomize()我的视差效果不再起作用了。我尝试过改变很多事情但没有成功。

如何让“Header Parallax Effect”脚本寻找新的动态 <script> block 而不是以前的 <img> ？

HTML:

<div class="inner" id="parallaxical">
     <script type="text/javascript">Randomize()</script>
</div>

CSS:

#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);
}

Javascript/jQuery:

/*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;

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);
    }

}());

变化

• 我将代码封装在一个 iife 中。
• 创建了一个 imageDirectory 变量。看起来更好看。