我一直在四处寻找并使用我发现的点点滴滴(主要是在这个网站上)来帮助我尽可能地走得更远,但恐怕我走一条我不应该走的路线把自己画到了一个角落里没有早点。基本上我正在尝试创建一个电灯开关。加载时,页面背景为黑色,框架周围带有黑色背景的图像(有一些轻微的眩光/发光,这就是为什么有图像的原因)。当您单击开关时,它会将背景颜色更改为白色,并将该图像更改为具有白色背景的其他图像。这工作正常,但我想添加一个淡入淡出,所以它不是即时变化,有点像淡入淡出开/关。由于我让前面部分工作的方式,我想知道这是否会比它应该的更困难。
我已经搜索并阅读了没有容器等的背景颜色不会褪色。只是不确定我将如何处理我已经拥有的东西。我完全愿意接受建议,即使这意味着以不同的方式重做之前的一些事情。我留下了一些评论的东西只是为了展示我以前尝试过的一些东西。我对 jQuery 很陌生,所以我希望其中一些可能会完全消失。
小提琴补充道。图片只是模拟图片,但服务于它们的目的 http://jsfiddle.net/timtim123/7wh4B/
HTML:
<body id="bodyback">
<img id="out" src="rhino.png" width="527" height="376" border="0" />
<img id="frame" src="frame.png" width="589" height="377" border="0" />
<img id="paper" src="paper.png" width="142" height="214" border="0" usemap="#links" />
<img src="background.png" id="backimg"/>
<img src="background2.png" id="backimg" style='display:none;'/>
<div id="lightswitch">
<img src="switchdark.png" width="46" height="275" border="0" alt="Make it light" />
</div>
CSS:
#bodyback {
background-color:black;}
#backimg
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#lightswitch
{
top: 0px;
left: 900px;
position:absolute;
z-index: 7;
}
JS:
$("#lightswitch").click(function() {
var src = $('#backimg').attr('src');
//change background image and color to white
if(src == 'background.png') {
// $("#backimg").fadeTo('slow', 0.3, function()
// $(this).attr("src","background2.png"),
$("#backimg").attr("src","background2.png"),
$("#bodyback").css("background-color","white");
//change background image and color back
} else if(src == "background2.png") {
$("#backimg").attr("src","background.png");
$("#bodyback").css("background-color","black");
}
});