无法更改使用视差滚动的图像宽度

Cannot change width of image that uses parallax scrolling

本文关键字：滚动 图像 视差      更新时间：2024-02-17

我无法更改使用从教程中复制的视差滚动代码的图像的宽度。我知道在这个图像示例中，div框和图像也没有完全对齐，但由于某种原因，我没有使用壁纸大小的图像，因为它太大了，所以作为一个示例，它完全对齐，所以不用担心div间距问题。

Jsfidle-https://jsfiddle.net/fouvdjm8/1/

HTML代码

<html>
<!doctype html>
<head>
<title>Parallax Scrolling Tutorial</title>
<!-- CSS Code -->
<link rel="stylesheet" href="style.css">
<!-- JS Code -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Section #1 -->
<section id="home" data-speed="10" data-type="background">
<article></article>
</section>
<div id="box"></div>
</body>
</html>

CSS代码

body{
margin:0;
padding:0;
}
#home { 
background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) 50% 0 no-repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative;
}
#box {
height: 1000px;
width: auto;
background-color: blue;
}

JS代码

$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object
  $(window).scroll(function() {
    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
    // Put together our final background position
    var coords = '50% '+ yPos + 'px';
    // Move the background
    $bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
}); 
});

你的css主页类应该看起来像这个

#home { 
   background: url(http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg) no-repeat center 0 fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   height: 1000px;  
   margin: 0 auto; 
   width: 100%; 
   max-width: auto; 
   position: relative;
}
相关文章：