Javascript 视差对<；脚本>；块

我试图将视差效果应用于脚本块，该脚本块在页面加载的基础上旋转图像。当HTML div的内容是静态的

时，它通常工作。因为Javascript查找

$（“#视差img”）.css

，由于将静态

替换为

随机化（）

我的视差效果不再起作用，因此不再使用它。我尝试过改变很多事情，但没有成功

如何让“标题视差效果”脚本查找新的动态

块，而不是以前的

HTML:

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;

这将完成以下工作：

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变量。看起来好多了

---

为了让我前面的问题更清楚，我重新表述了原来的问题。但是，上一个问题的答案已集成在“Header rotate”脚本块中，因此已被接受。您的css以img标记为目标。但是您的Randomize（）函数不会创建img。它只是设置容器的背景图像。让它在容器内创建一个图像，一切都会好起来。我明白你的意思。你能举个（小）例子吗？document.createElement（'img'）；好吧，我已经玩了一段时间了，但是我似乎不能理解这个概念。因为这件事，我这个年纪掉了不少头发。我想我必须删除document.getElementById行，并插入一个document.createElement（img）而不是这些行。问题是；如何用数组中的图像填充新元素？太棒了！喜欢你一开始清理代码的方式。完美的执行。

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

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

}());