图片顶部的怪异线错误？

debugcn 发表于 Dev

奥利弗·克莱恩（Oliver Klein）

最近几天我一直在网站上工作。我刚刚上传了它，却不知道为什么在滚动事件中图像的峰值处会出现一些线条？

知道如何解决吗？

本质上，我使用JQuery改变了图像的速度。我将展示图像及其HTML的基础：

<div class="mountains1"></div>

CSS：

.mountains1 {
  background: url(../img/mountains1.png) repeat;
  background-size: cover;
  width: 100%;
  height: 800px;
  position: absolute;
  z-index: 13;
}

和JavaScript：

var parallax = function(){
  var $scrollY = $(window).scrollTop();
  var $scrollX = $(window).scrollLeft();
  $('.mountains1'  ).css('top', '1640' -($scrollY * 1) + 'px');
}

$(document).ready(function(){parallax();});
$(window).scroll(function(){parallax();});

ps。我使用的是野生动物园，当发生错误时，Chrome中不会发生。

当我出于某种原因使用ceil（）或round（）方法时，它会中断吗？

这是我为回应Leo而做出的更改

var parallax = function(){
var $scrollY = $(window).scrollTop();
var $scrollX = $(window).scrollLeft();
var $scrollYint = Math.round($scrollY);
$('.cloudback'  ).css('top', '-375' -($scrollYint * 0.4) + 'px');

$('.mountains1'  ).css('top', '1640' -($scrollYint * 1) + 'px');
$('.mountains2'  ).css('top', '1200'-($scrollYint * 0.75) + 'px');
$('.mountains3'  ).css('top', '720'-($scrollYint * 0.3) + 'px');

$('.navbar2'  ).css('top', '1700' -($scrollYint * 0.7) + 'px');

$('.forest1'  ).css('top', '3100' -($scrollYint * 0.8) + 'px');
$('.forest2'  ).css('top', '2600'-($scrollYint * 0.6) + 'px');
$('.forest3'  ).css('top', '2100'-($scrollYint * 0.4) + 'px');

$('.navbar3'  ).css('top', '3600' -($scrollYint * 0.8) + 'px');

//$('.grass1'  ).css('top', '5250' -($scrollY * 0.8) + 'px');
//$('.grass2'  ).css('top', '4500'-($scrollY * 0.6) + 'px');
//$('.grass3'  ).css('top', '3750'-($scrollY * 0.4) + 'px');

//$('.navbar4'  ).css('top', '5500' -($scrollY * 0.8) + 'px');

}

狮子座农夫

我看过您的代码，发现您正在使用javascript来计算绝对定位图像的最高价值。当最高值计算为带小数位的值时，该行将显示在图像上方。例如，top: 1642.4px;而不是那么top:1643px。

因此，您需要更新视差函数以使图像的top值取整，以免获得小数点后的结果。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。