javascript - 视差图像对我不起作用-6ren

javascript - 视差图像对我不起作用

转载作者：行者123 更新时间：2023-11-29 15:32:20

我尝试使用这个插件:http://pixelcog.github.io/parallax.js/但不幸的是我无法让它工作。我的错误是什么？

.parallax-window {
    min-height: 400px;
    background: transparent;
}

<html>
<head>

<link rel="stylesheet" type="text/css" href="1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.js"></script>


</head>
<body>

<div class="parallax-window" data-parallax="scroll" data-image-src="http://mikeysiegel.com/wp-content/uploads/2015/07/nasa-cosmos-4.jpg" data-speed="0.2" data-bleed="10" data-natural-height="332" data-natural-width="1000"></div>
 <div style="background-color: red;">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>

</html>

最佳答案

<script src="parallax.js"></script>

上面的代码包含问题。 “parallax.js” 没有存储在任何地方。如果将 url 更改为链接到 “parallax.js” 文件的 URL，它将起作用。现在，url 被重定向到 "http://stacksnippets.com/parallax.js"。此网址不是任何文件

例子:

/*!
 * parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
 * @copyright 2015 PixelCog, Inc.
 * @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
 */

;(function ( $, window, document, undefined ) {

  // Polyfill for requestAnimationFrame
  // via: https://gist.github.com/paulirish/1579671

  (function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                 || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() { callback(currTime + timeToCall); },
          timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };

    if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
      };
  }());


  // Parallax Constructor

  function Parallax(element, options) {
    var self = this;

    if (typeof options == 'object') {
      delete options.refresh;
      delete options.render;
      $.extend(this, options);
    }

    this.$element = $(element);

    if (!this.imageSrc && this.$element.is('img')) {
      this.imageSrc = this.$element.attr('src');
    }

    var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];

    if (positions.length < 1) {
      positions.push('center');
    }
    if (positions.length == 1) {
      positions.push(positions[0]);
    }

    if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
      positions = [positions[1], positions[0]];
    }

    if (this.positionX != undefined) positions[0] = this.positionX.toLowerCase();
    if (this.positionY != undefined) positions[1] = this.positionY.toLowerCase();

    self.positionX = positions[0];
    self.positionY = positions[1];

    if (this.positionX != 'left' && this.positionX != 'right') {
      if (isNaN(parseInt(this.positionX))) {
        this.positionX = 'center';
      } else {
        this.positionX = parseInt(this.positionX);
      }
    }

    if (this.positionY != 'top' && this.positionY != 'bottom') {
      if (isNaN(parseInt(this.positionY))) {
        this.positionY = 'center';
      } else {
        this.positionY = parseInt(this.positionY);
      }
    }

    this.position =
      this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
      this.positionY + (isNaN(this.positionY)? '' : 'px');

    if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
      if (this.iosFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    if (navigator.userAgent.match(/(Android)/)) {
      if (this.androidFix && !this.$element.is('img')) {
        this.$element.css({
          backgroundImage: 'url(' + this.imageSrc + ')',
          backgroundSize: 'cover',
          backgroundPosition: this.position
        });
      }
      return this;
    }

    this.$mirror = $('<div />').prependTo('body');
    this.$slider = $('<img />').prependTo(this.$mirror);

    this.$mirror.addClass('parallax-mirror').css({
      visibility: 'hidden',
      zIndex: this.zIndex,
      position: 'fixed',
      top: 0,
      left: 0,
      overflow: 'hidden'
    });

    this.$slider.addClass('parallax-slider').one('load', function() {
      if (!self.naturalHeight || !self.naturalWidth) {
        self.naturalHeight = this.naturalHeight || this.height || 1;
        self.naturalWidth  = this.naturalWidth  || this.width  || 1;
      }
      self.aspectRatio = self.naturalWidth / self.naturalHeight;

      Parallax.isSetup || Parallax.setup();
      Parallax.sliders.push(self);
      Parallax.isFresh = false;
      Parallax.requestRender();
    });

    this.$slider[0].src = this.imageSrc;

    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete) {
      this.$slider.trigger('load');
    }

  };


  // Parallax Instance Methods

  $.extend(Parallax.prototype, {
    speed:    0.2,
    bleed:    0,
    zIndex:   -100,
    iosFix:   true,
    androidFix: true,
    position: 'center',
    overScrollFix: false,

    refresh: function() {
      this.boxWidth        = this.$element.outerWidth();
      this.boxHeight       = this.$element.outerHeight() + this.bleed * 2;
      this.boxOffsetTop    = this.$element.offset().top - this.bleed;
      this.boxOffsetLeft   = this.$element.offset().left;
      this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;

      var winHeight = Parallax.winHeight;
      var docHeight = Parallax.docHeight;
      var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
      var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
      var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
      var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;

      if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
        this.imageWidth    = imageHeightMin * this.aspectRatio | 0;
        this.imageHeight   = imageHeightMin;
        this.offsetBaseTop = imageOffsetMin;

        var margin = this.imageWidth - this.boxWidth;

        if (this.positionX == 'left') {
          this.offsetLeft = 0;
        } else if (this.positionX == 'right') {
          this.offsetLeft = - margin;
        } else if (!isNaN(this.positionX)) {
          this.offsetLeft = Math.max(this.positionX, - margin);
        } else {
          this.offsetLeft = - margin / 2 | 0;
        }
      } else {
        this.imageWidth    = this.boxWidth;
        this.imageHeight   = this.boxWidth / this.aspectRatio | 0;
        this.offsetLeft    = 0;

        var margin = this.imageHeight - imageHeightMin;

        if (this.positionY == 'top') {
          this.offsetBaseTop = imageOffsetMin;
        } else if (this.positionY == 'bottom') {
          this.offsetBaseTop = imageOffsetMin - margin;
        } else if (!isNaN(this.positionY)) {
          this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
        } else {
          this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
        }
      }
    },

    render: function() {
      var scrollTop    = Parallax.scrollTop;
      var scrollLeft   = Parallax.scrollLeft;
      var overScroll   = this.overScrollFix ? Parallax.overScroll : 0;
      var scrollBottom = scrollTop + Parallax.winHeight;

      if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop < scrollBottom) {
        this.visibility = 'visible';
      } else {
        this.visibility = 'hidden';
      }
      this.mirrorTop = this.boxOffsetTop  - scrollTop;
      this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
      this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);

      this.$mirror.css({
        transform: 'translate3d(0px, 0px, 0px)',
        visibility: this.visibility,
        top: this.mirrorTop - overScroll,
        left: this.mirrorLeft,
        height: this.boxHeight,
        width: this.boxWidth
      });

      this.$slider.css({
        transform: 'translate3d(0px, 0px, 0px)',
        position: 'absolute',
        top: this.offsetTop,
        left: this.offsetLeft,
        height: this.imageHeight,
        width: this.imageWidth,
        maxWidth: 'none'
      });
    }
  });


  // Parallax Static Methods

  $.extend(Parallax, {
    scrollTop:    0,
    scrollLeft:   0,
    winHeight:    0,
    winWidth:     0,
    docHeight:    1 << 30,
    docWidth:     1 << 30,
    sliders:      [],
    isReady:      false,
    isFresh:      false,
    isBusy:       false,

    setup: function() {
      if (this.isReady) return;

      var $doc = $(document), $win = $(window);

      $win.on('resize.px.parallax load.px.parallax', function() {
          Parallax.winHeight = $win.height();
          Parallax.winWidth  = $win.width();
          Parallax.docHeight = $doc.height();
          Parallax.docWidth  = $doc.width();
          Parallax.isFresh = false;
          Parallax.requestRender();
        })
        .on('scroll.px.parallax load.px.parallax', function() {
          var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
          var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
          Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  $win.scrollTop()));
          Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
          Parallax.overScroll = Math.max($win.scrollTop() - scrollTopMax, Math.min($win.scrollTop(), 0));
          Parallax.requestRender();
        });

      this.isReady = true;
    },

    configure: function(options) {
      if (typeof options == 'object') {
        delete options.refresh;
        delete options.render;
        $.extend(this.prototype, options);
      }
    },

    refresh: function() {
      $.each(this.sliders, function(){ this.refresh() });
      this.isFresh = true;
    },

    render: function() {
      this.isFresh || this.refresh();
      $.each(this.sliders, function(){ this.render() });
    },

    requestRender: function() {
      var self = this;

      if (!this.isBusy) {
        this.isBusy = true;
        window.requestAnimationFrame(function() {
          self.render();
          self.isBusy = false;
        });
      }
    }
  });


  // Parallax Plugin Definition

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this);
      var options = typeof option == 'object' && option;

      if (this == window || this == document || $this.is('body')) {
        Parallax.configure(options);
      }
      else if (!$this.data('px.parallax')) {
        options = $.extend({}, $this.data(), options);
        $this.data('px.parallax', new Parallax(this, options));
      }
      if (typeof option == 'string') {
        Parallax[option]();
      }
    })
  };

  var old = $.fn.parallax;

  $.fn.parallax             = Plugin;
  $.fn.parallax.Constructor = Parallax;


  // Parallax No Conflict

  $.fn.parallax.noConflict = function () {
    $.fn.parallax = old;
    return this;
  };


  // Parallax Data-API

  $(document).on('ready.px.parallax.data-api', function () {
    $('[data-parallax="scroll"]').parallax();
  });

}(jQuery, window, document));

.parallax-window {
    min-height: 400px;
    background: transparent;
}

<html>
<head>

<link rel="stylesheet" type="text/css" href="1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


</head>
<body>

<div class="parallax-window" data-parallax="scroll" data-image-src="http://mikeysiegel.com/wp-content/uploads/2015/07/nasa-cosmos-4.jpg" data-speed="0.2" data-bleed="10" data-natural-height="332" data-natural-width="1000"></div>
 <div style="background-color: red;">
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>

</html>

此处，“parallax.js” 位于代码段内，它将成功加载。现在，它可以正常工作...

关于javascript - 视差图像对我不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33612724/

文章推荐： javascript - ajax页面加载后重新初始化函数

文章推荐： MySQL 存储过程将参数输入与表值进行比较

文章推荐： javascript - 在 querySelectorAll 的选择器中使用变量

javascript - 视差/背景位置的特征检测
好的，所以我已经创建了自己的视差 jQuery/JS 脚本，但我只是不知道如何定位支持以下内容(需要以下内容)的浏览器: 支持背景位置的转换我正在尝试的站点(预览)是: My Test Site 我
jquery - 背景覆盖+视差
我正在制作带有固定背景和封面的整页。当我添加视差时 - 动画看起来不错，但它滞后太多，我不知道为什么。我有一台很好的 PC，所以这不是这个问题，我之前让其他人产生了视差，这并不滞后。有什么解决办法
html - 汉堡菜单+视差
我有一个奇怪的组合 - 视差和汉堡菜单。问题是米导航会在您悬停的任何地方下降，不仅当您将鼠标悬停在汉堡菜单图标上时。我认为这是一个厚厚的错误代码，但我找不到它。我没有 jquery 的。还有，我
javascript - 视差-元素毛刺
因此，我一直在努力围绕这种名为“视差”的整洁效果。基本上，背景滚动比前景元素慢。我发现这个新的“技巧”正在起作用。随着滚动的进行，更改top属性以创建视差效果。问题... 因此，为了提高性能并减轻
html - 视差+固定菜单问题
我的导航栏在 CSS 中加入视差效果后无法保持固定。我在我的网站上放置了一个带有过渡 JS“Math.round($(window).scrollTop()) > 490)”的固定导航栏。之后，我
javascript - 视差，作为主页横幅
这是一个非常模糊的问题，但我不确定从哪里开始，所以如果有人能给我一些想法，那你就太好了。我想在我的网站主页上使用视差效果，但我不确定如何创建这种效果。我想要的效果在这里装箱http://davega
jquery - 视差 slider
我使用了本教程中的视差脚本 http://tympanus.net/codrops/2011/01/03/parallax-slider/ 我在这里发布了一个 fiddle http://jsfidd
javascript - 滚动时如何让div改变不透明度？ (视差)
我想知道如何创建视差滚动效果之类的东西。向下滚动得越远，div 变得越不透明，在某个点之后，它又开始变得更加透明。我知道需要 JS/JQuery 才能做到这一点。谁能给我一个简单的方法来实现这个目标？
javascript - 使元素滚动更慢(视差)
我的页面上有一个元素是绝对定位的。我正在尝试编写一段 jQuery 代码，使该元素的滚动速度比页面上其他元素的滚动速度慢。到目前为止，我已经写了这篇文章，但似乎根本无法让它发挥作用。有没有人有这方
iphone - Sprite 上的无限滚动(视差)
我是 cocos2d 世界的新手，我正在开发我的第一个教程并面临一个问题我的问题是我有一个图像(1024 X 320)并且我的方向是横向我需要从右到左连续移动该图像为此目的我使用了 Ray 的太空射击
javascript - 简单的 jQuery 视差
我需要调试此 jQuery 的帮助，其中我操纵容器中元素的上边距，该容器具有固定大小并将溢出设置为隐藏，以便我可以创建视差效果。视差有效，但如果您向下滚动一个像素，然后重新加载页面，它就会中断。谁能帮
html - 制作一个 Div 视差
我有一个 div，我想留在原地，这样导航栏和其他部分就可以通过它。这是我目前的工作:
css - 带有粘性标题问题的纯 CSS3 视差
我建了一个网站，页面很长。我们决定使用纯 CSS3 为它添加视差并且它起作用了。我从这里得到的 CSS3 视差代码: codepen.io/keithclark/pen/JycFw 后来，我们决定应
javascript - 视差 "scrolling"只能通过导航
由于我对 Javascript/Jquery/HTML5/CSS3 还是个新手，我想我应该问一个问题给你们这些更有经验的程序员。我有点卡在我的程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但
javascript - 找出(视差？)滚动效果
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，
opencv - 计算距离(视差)OpenCV
-- 更新 2 -- 如果您使用单个相机计算距离，下面的文章非常有用(尽管它使用的是 Python 而不是 C++):Find distance from camera to object/marke
javascript - 视差 - 由于绝对定位，页面末尾不可见
我有一个使用 skrollr 构建的视差网站在我到达页面末尾之前效果很好。我想要一个成为您可以在页面上滚动的最后/最远点。目前，如果我在大屏幕上查看时会留下巨大的空白，或者我无法进一步向下滚动以在
css - 视差(相对)层组相互重叠
我不明白为什么会这样:我有: https://jsfiddle.net/d5jehq02/1 background forefront 我正在
android - 滚动时的 Imageview 视差
我看到很多例子说明视差背景当你滚动或 ListView 视差但是我找不到一个清楚的例子如何在你滚动 Activity 时对图像实现视差效果。可以在 Airbnb 应用程序中找到示例实现。向下滚动时，
html - 视差 css 背景图像移动一点
我的背景图片来自background-url，我的视差适用于我放置的图片:background-attachment: fixed; 我怎样才能让背景图片在我滚动时稍微移动一点？这是我正在谈论的例子

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 视差图像对我不起作用