视差图像对我不起作用
[英]Parallax image not working for me
问题描述
我试图使用这个插件： 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>
1 个解决方案
解决方案1
1 已采纳 2015-11-13 12:38:02
<script src="parallax.js"></script>
上面的代码包含问题。 "parallax.js"不存储在任何地方。 如果您将URL更改为URL，链接到"parallax.js"文件，它将起作用。 现在，该网址被重定向到"http://stacksnippets.com/parallax.js" 。 此url 不是任何文件
例：
/*! * 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"位于代码段内，并且会加载成功。 现在，它没有问题......
具有1个图像的视差
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.