滑动门

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_34417814

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Song-Timfa/p/6495596.html

一种与滑动门相似的效果—滑动门。

<!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>

转载于:https://www.cnblogs.com/Song-Timfa/p/6495596.html