Question

我正在尝试使背景图像淡出淡出。我无法更改HTML代码。

        <ul id="supersized" class="quality" style="visibility: visible;">
          <li class="slide-0 activeslide">
           <a target="_blank">
           <img src="image1" style="width: 994px; height: 745.5px; left: 0px; top: -39.5px;">
         </a></li></ul>

有一个插件可以让图像在每个屏幕上看起来都很漂亮。所以我必须只使用Javascript。我来到这里：

$(document).ready(function() {
    var scroll_pos = 0;
    $(document).scroll(function() {
        var parent = document.getElementById('supersized'); // because img has no ID
        var element = parent.getElementsByTagName('img')[0];
        scroll_pos = $(this).scrollTop();
        if (scroll_pos > 710) {
            $(element).attr("src", 'image1');
        } else {
            $(element).attr("src", 'image2');
        }
    });
});

然后我意识到在这种情况下我无法做出淡化。所以我带来了这个：

$(document).ready(function() {
    var scroll_pos = 0;
    $(document).scroll(function() {
        scroll_pos = $(this).scrollTop();
        var parent = document.getElementById('supersized');
        var element = parent.getElementsByTagName('img')[0];
        if (scroll_pos > 710) {
            $(element).attr("src", 'img1').fadeIn();
        } else {
            $(element).attr("src", 'img1').fadeOut();
        };
        if (scroll_pos < 710) {
            $(element).attr("src", 'img2').fadeIn();
        } else {
            $(element).attr("src", 'img2').fadeOut();
        };

    });
});

但这不起作用。知道怎么做吗？

Answer 1

**HTML AND CSS**

<style>    
#effect {
  padding: 0.4em;
  background: #555 url("/sites/default/files/fashion-and-jewellery.jpg");
  opacity: 0.5;
   }    

#effect {
  max-width: 490px;
  height: 320px;
  }  
</style>

<div id="effect" class="ui-widget-content ui-corner-all"></div>


**JQUERY**

$(document).ready(function(){
    $("#effect").hover(function() {
        $(this).animate({opacity: '1'}, "slow");
    }, function () {
        $(this).animate({opacity: '0.5'}, "slow");
    });
});

淡化没有HTML的背景图像

1 个答案: