层显示控制

•修改style.display，例子：切换层的显示
•        function togglediv() {
•            var div1 = document.getElementById('div1');
•            if (div1.style.display == '') {
•                div1.style.display = 'none';//不显示
•            }
•            else {
•                div1.style.display = '';//显示
•            }
•        }
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5    
 6     <script type="text/javascript">
 7         function hide(btn) {
 8             var div = document.getElementById("d1");
 9             if (div.style.display == "none") {
10                 div.style.display = "";
11                 btn.value = "隐藏";
12             }else{
13             div.style.display = "none";
14             btn.value = "显示";
15             }
16         }
17         function show() {
18             var div = document.getElementById("d1");
19             div.style.display = "";
20         }
21 
22         function detailsShow(chk) {
23             var div = document.getElementById("d3");
24             if (chk.checked) {
25                 div.style.display = "";
26             } else {
27                 div.style.display = "none";
28             }
29         }
30 
31         function aOver() {
32             //screenX 鼠标在屏幕中坐标
33             var div = document.getElementById("d4");
34             div.style.position = "absolute";
35             div.style.top = window.event.clientY;//鼠标在浏览器中的位置
36             div.style.left = window.event.clientX;
37             div.style.display = "";
38 
39         }
40         function aOut() {
41             var div = document.getElementById("d4");
42             div.style.display = "none";
43         }
44     </script>
45 </head>
46 <body>
47     <div id="d1">
48         怎么会迷上你，我在问自己。。。
49     </div>
50     <div id="d2">
51         春天里百花香
52     </div>
53     <input type="button" value="隐藏" onclick="hide(this)" />
54     <input type="button" value="显示" onclick="show()" />
55     <hr />
56     
57     <input type="checkbox" onclick="detailsShow(this)" />显示详细信息
58     <div id="d3" style=" display:none">
59         详细信息
60     </div>
61     
62     <hr />
63     
64     <a href="http://www.baidu.com" onmouseover="aOver()" onmouseout="aOut()">百度</a>
65     <a href="http://www.google.com" onmouseover="aOver()"  onmouseout="aOut()">google</a>
66     <a href="http://www.sougou.com" onmouseover="aOver()"  onmouseout="aOut()">sougou</a>
67     
68     <div id="d4" style=" display:none; border:dotted 1px red;">
69         <img src="IMG_8910.jpg" width="200px" height="100px" />
70         <br />我拍的照片
71         <br />赵苑
72     </div>
73 </body>
74 </html>

•案例：注册页面，点击“高级”CheckBox，则显示高级选项，否则隐藏

•案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是onmouseover，离开的事件是onmouseout。
 
 
03-27
posted @ 2013-03-25 11:24  Big.Eagle  阅读(177)  评论(0)  编辑  收藏  举报