滑动门
一种与滑动门相似的效果—滑动门。
<!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{width: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>