Question

我对编码有点新意。我有一个带背景图像的div。当我向下滚动时，我希望能够将图像从模糊版本更改为更清晰的版本。我的HTML代码是这样的：

<div class="intro">
<div class="blur" style="background-image: url(&quot;blurimage.png&quot;);"></div>
<div class="clear" style="opacity: 0.00666667; background-image: url(&quot;image.png&quot;);"></div> 
</div>

我的CSS代码是这样的：

.intro{
    display: table;
    width: 100%;
    height: 700px;
    position: relative;

}
.blur{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -10;
    background-color: #222; 
}
.clear{
    background-size: cover;}

我尝试过使用很多javascript函数但没有用。请指导我如何使用Javascript函数执行此操作。谢谢！

Answer 1

使用JavaScript，您可以尝试

document.addEventListener("scroll", function(event) {
    // this code is executed each time the user scrolls
    var scrollPosition = window.pageYOffset;
    // scrollPosition is 0 at the top of the page
    // it contains how many pixels have been scrolled down
});

希望有所帮助。

Answer 2

将此添加到您的JS文件中（我假设您也包含了jQuery）：

u""

同时将其添加到jQuery(document).ready(function($) { scrollPosition = $(document).scrollTop(); $('body').scroll(function() { $('.intro .clear').animate({ height: scrollPosition, }, 300); }); });：

.clear

另请注意，如果您将图像放在页面顶部，此代码将起作用。否则，可以随父元素的实际选择器更改.clear { position: absolute; top: 0; left: 0; height: 0; background-size: cover; }。

我还建议使用其他名称重命名$(document).scrollTop()类，因为如果您决定稍后使用CSS框架或插件，则该类名可能会保留用于clearfix样式。

Answer 3

点击此处 jsfiddle

通过更改background-color做了一个简单的例子。这只是出于示例目的，因为我无法使用您的图像

另外...... intro内的div和.blur上的.clear切换类只需{1}}到div，反之亦然，并使用CSS来设置样式那些课程。

这个想法是你只有一个background w，你可以根据滚动来更改<div class="intro"> <div class="blur"></div> </div>

HTML：

.intro{
    display: table;
    width: 100%;
    height: 700px;
    position: relative;

}

.intro div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -10;

}
.blur{
    background-image: url("blurimage.png");
    background-color: red; 
}
.clearimg {
    background-size: cover;
    background-color:blue
    background-image: url("image.png");
}

CSS：

$(window).scroll(function() {
    if ($(window).scrollTop() > 0) {
        $(".intro div").addClass("clearimg")
        $(".intro div").removeClass("blur")
    }else{
        $(".intro div").addClass("blur")
        $(".intro div").removeClass("clearimg")
   }
});

JQ：

var theurl = 'http://server/api/book/getAll';
$http.get(theurl).then(function(res) {
  $scope.posts = res.data.posts;

  $scope.showDownloadBT = function(part){
    var result = true;
    var queryDR = "SELECT * FROM BookDownloaded WHERE bookId = ? AND page = ? ";
     $cordovaSQLite.execute(db, queryDR, [book_id, the_page]).then(function(res2) {
      if(res2.rows.length > 0) {
          result = false;
      }else{
          result = true;
      }
    }, function (err) {
        console.error(err);
    });
    return result;
  }

滚动时更改图像

3 个答案: