在背景颜色函数下添加背景图像
Adding a background image under a background color function
我的交互式宠物上运行了三个功能(更改背景,调光灯,鼠标跟随)。我正在尝试在身体的背景中添加图像,但每次尝试时它都会被推到顶部,脏/清洁水箱功能不起作用。有人可以告诉我如何更改下面第一个功能的颜色部分以在图像而不是颜色代码之间切换吗?我认为这将解决眼前的问题。:/
CSS代码:
//change background color: dirty/clean tank
setTimeout(function dirty() { //sets background color to murky green
document.body.style.backgroundColor = ****"#CCCC99";** //would like this to be an image**
var btn = document.body.appendChild(document.createElement('button'));
btn.appendChild(document.createTextNode("Clean the tank!"));
document.body.style.marginTop = "-1000px";
btn.onclick = function clean() {
btn.parentNode.removeChild(btn);
document.body.style.backgroundColor = **"#CCFFFF";//would like this to be an image**
setTimeout(dirty,27000); //how long it takes to make the tank dirty
};
},500); //first loading of clear blue timeout
//dim the lights
var dimmed = 0;
function toggleLights()
{
var dimmer = document.getElementById("dimmer");
if(dimmed == 0) dimmed = 1;
else dimmed = 0;
if(dimmed == 1)
{
dimmer.style.opacity = 0.8;
dimmer.style.visibility = "visible";
}
if(dimmed == 0)
{
dimmer.style.opacity = 0.0;
dimmer.style.visibility = "hidden";
}
}
//fish moves on mouse hover
$(document).ready(function() {
$("#swim").mousemove(function (event) {
var fish = $("#fish1");
var position = fish.position();
var mousey = event.pageX;
if (position.left > mousey) {
$("#fish1").html("<img src='images/happy.png' />");
} else {
$("#fish1").html("<img src='images/happyback.png'/>");
}
$("#fish1").stop().animate({
left: event.pageX,
top: event.pageY
}, 300);
});
});
网页代码:
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"
</script>
<script type="text/javascript" src="pet.js"></script>
<script type="text/javascript" src="core.js"></script>
</HEAD>
<div id="table">
<div id="dimmer" onClick="toggleLights()"></div>
<a href="javascript:toggleLights();"><img src="images/table-lamp.png" height="380px"
alt="table lamp"></a>
</div>
<div id="swim">
<div id="fish1"><img src="images/happy.png"/></div>
</div>
</BODY>
</HTML>
在 HTML 中添加起始<body>
标记,并使用 javascript 而不是样式属性更改元素类。这样,您就可以通过CSS文件更好地控制样式。
所以你会做这样的事情:
document.body.className = 'state1';
在你的 CSS 中
.state1{
background-image: url(the/image.jpg);
}
等等...
相关文章:
- 将淡入淡出添加到“我的身体背景滑块”
- 有没有添加一个ng点击到md背景
- 如何在背景图像上添加文本
- 将背景音乐添加到网页
- 通过程序添加CSS渐变作为背景图像
- 将第二个背景图像添加到元素中
- 如何通过音频切换将背景音乐添加到网页中
- 如何使用toDataURL()将图像作为背景图像与画布内容一起添加到一个图像中
- 尝试添加一个按钮,每次按下按钮时都会更改导航栏的背景颜色
- IE DIV悬停区域不一样.直到我添加背景颜色
- 一种在指定时间后更改的背景图像之间添加更平滑过渡的简单方法
- jquery onclick 为拉出添加背景叠加
- 需要在两个背景之间添加淡入淡出效果
- 将全屏背景图像添加到循环的 Wordpress/Genesis 子主题
- 在网站的JS文件中添加背景图像
- 在HTML和Javascript中向背景添加网格线,类似于VisualStudios网格
- 悬停链接时添加背景图像
- D3:将滤镜作为背景添加到SVG元素
- 将背景添加到THREE场景中
- 如何将循环样式的重复图像阶段背景添加到我的网站