使用javascript滚动图像时更改页面背景

我目前正在为此使用javascript，但如果你有更好的解决方案，我洗耳恭听。所以我有我的包装器和它的背景，里面是我所有的内容，包括一个按钮，我想在悬停淡入淡出时改变包装器/页面的背景

我的css看起来像这样

#wrapper {position: absolute; min-width:550px; width:100%; height:100%; background: url(img/bg.jpg) no-repeat center top;}

然后是我的html

<div id="wrapper">
<div id="content">
<div class="logo">
<img src="img/logo1.png" />
</div>
<div class="button">
<img src="img/dj.png" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')"/>
</div>
</div>
</div>

然后是我的javascript

<script type="text/javascript">
    function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
    }
</script>

函数更改BGImage（图像，id）{
var元素=document.getElementById（id）；
element.style.backgroundImage=“url（“+image+”）；
}

所以，当它工作时，它会改变背景，然后在mouseout上改变它，不过我希望它淡入淡出。我该怎么做呢

编辑：尝试了下面的两种解决方案，但似乎都不起作用或不适用

我喜欢你的解决方案。为您尝试实现的淡入淡出效果提供一个选项

祝你好运

---

编辑：也似乎是一个很好的清洁解决方案。

这里有一个很好的清洁方法

$（'body'）。查找（'*[hoverImg]'）。每个（函数（索引）{
$this=$（this）
$this.wrap（“”）
$this.parent（）.css（'width'，$this.width（））
$this.parent（）.css（'height'，$this.width（））
$this.parent（）.css（'background-image'，'url（“+$this.attr（'hoverImg'）+”）
$this.hover（函数（）{
$（this.stop（））
$（此）.fadeTo（“”，.01）
}，函数（）{
$（this.stop（））
$（此）.fadeTo（“”，1）
})                    
});

这是我发现的，但它适用于滚动您想要更改的相同图像。对我来说，我的图像是a）用css设置的，b）不是我用

jQuery

滚动的图像，而是完成了这项工作。你可以修改脚本来重新定义“this”作为目标元素。我对其进行了修改，但无法使其在更改单独分区的背景方面起作用。如果我正确理解您的问题，您的

背景图像

应该是

无

。如果没有，请解释更多？没有，因为如果没有，它将删除原始背景图像，而这不是我想要做的

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">

$('body').find('*[hoverImg]').each(function(index){
    $this = $(this)
    $this.wrap('<div>')     
    $this.parent().css('width',$this.width())  
    $this.parent().css('height',$this.width())
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
        $this.hover(function() {
            $(this).stop()
            $(this).fadeTo('',.01)    
        },function() {
            $(this).stop()
            $(this).fadeTo('',1)             
        })                    
});