使用 JavaScript 翻转图像时更改页面背景

发布于 2024-12-25 01:31:32 字数 982 浏览 4 评论 0原文

我目前正在使用 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>

所以当它运行时，它会改变背景，然后在鼠标移开时将其更改回来，但是我希望它淡入和淡出。我该怎么做呢？

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

原文

I am currently using javascript for this but if you have a better solution I am all ears. So I have my wrapper and its background and within that is all my content including a button that I want to when hovering fade to change the background of the wrapper/page.

my css looks like this

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

and then my 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>

and then my javascript

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

So as it sits it works, it changes the background and then changes it back on mouseout, however I want it to fade in and out. How would I go about doing this??

EDIT: attempted both solutions below, neither seem to work or apply

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别把无礼当个性 2025-01-01 01:31:32

这是一个很好、干净的方法。

http://jsfiddle.net/Diodeus/gYyBL/

<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)             
        })                    
});

Here is a nice, clean way to do it.

http://jsfiddle.net/Diodeus/gYyBL/

<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)             
        })                    
});

回复收藏 0 原文