3个小效果
<html>
<head><
style>
#div1{ width:200px;height:200px;background:red;}
#div2{ width:100px;height:300px;background:black; visibility:hidden;}
#div3{ width:200px;height:200px; border:1px solid #ccc;}
</style>
<script>
function changeBlue()
{
var oDiv=document.getElementById('div1');
oDiv.style.background=('blue');
}
function changeRed()
{
var oDiv=document.getElementById('div1');
oDiv.style.background=('red');
}
function changeHide()
{
var o2Div=document.getElementById('div2')
if(o2Div.style.visibility=='visible')
{
o2Div.style.visibility=('hidden');
}
else
{
o2Div.style.visibility=('visible');
}
}
function changeGreen()
{
var o3Div=document.getElementById('div3');
o3Div.style.background=('green');
}
function changeYellow()
{
var o3Div=document.getElementById('div3');
o3Div.style.background=('yellow');
}
function changePurple()
{
var o3Div=document.getElementById('div3');
o3Div.style.background=('purple');
}
</script>
</head>
<body>
1、鼠标移入移出效果
<div id="div1" onmouseover="changeBlue()" onmouseout="changeRed()"></div>
2、鼠标点击显示、隐藏效果<br/>
<input type="button" value="点击我展开" onclick="changeHide()"/>
<div id="div2"></div>
3、点击按钮切换背景色效果
<input type="button" value="变绿" onclick="changeGreen()" />
<input type="button" value="变黄" onclick="changeYellow()" />
<input type="button" value="变紫" onclick="changePurple()" />
<div id="div3"></div>
</body>
</html>