一种与滑动门相似的效果—滑动门。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="宋添发" />
<meta name="Genarator" content="ediplus"/>
<meta name="description" content="滑动门 " />
<title>滑动门</title>
<!--<link rel="stylesheet" type="text/css" href="my.css" />-->
<!--<script type="text/javascript" src="jquery-1.12.0.min.js"></script>-->
<script type="text/javascript">
function hd(num){
for(var id = 0;id<=4;id++)
{
if(id==num)
{
document.getElementById("tx_hd"+id).style.display="block";
document.getElementById("hdm"+id).className="bg_block";
}
else
{
document.getElementById("tx_hd"+id).style.display="none";
document.getElementById("hdm"+id).className="bg_none";
}
}
}
</script>
<style type="text/css">
div{230px;height:100px;background:gray;}
</style>
</head>
<body>
<button id="hdm0">按钮1</button>
<button id="hdm1" onmousemove="javascript:hd(1);">按钮2</button>
<button id="hdm2" onmousemove="javascript:hd(2);">按钮3</button>
<button id="hdm3" onmousemove="javascript:hd(3);">按钮4</button>
<div id="tx_hd0" style="display:block;">111</div>
<div id="tx_hd1" style="display:none;">222</div>
<div id="tx_hd2" style="display:none;">333</div>
<div id="tx_hd3" style="display:none;">444</div>
</body>
</html>