js 事件点击 显示 隐藏

时间:2014-05-09 13:31:13   收藏:0   阅读:401

 

bubuko.com,布布扣
 1       <div style="position:absolute;left:40%;top:10%;border-style:dotted">
 2           <img src="zgl.jpg"/><br/>
 3           <center>
 4               <input type="button" value="隐藏"/>
 5                   &nbsp;&nbsp;&nbsp;&nbsp;
 6               <input type="button" value="显示"/>
 7           </center>
 8       </div>
 9       <script type="text/javascript">
10           document.getElementsByTagName("input")[0].onclick=function(){
11               //将图像隐藏
12               var imgElement = document.images[0];
13               imgElement.style.visibility="hidden";
14           }
15           document.getElementsByTagName("input")[1].onclick=function(){
16               //将图像显示
17               var imgElement = document.images[0];
18               imgElement.style.visibility="visible";
19           }
20           document.getElementsByTagName("div")[0].onmouseover=function(){
21               //将图片放大
22               var imgElement = document.images[0];
23               //获取原来图片的大小
24               x = imgElement.width;
25               y = imgElement.height;
26               imgElement.width=imgElement.width*1.5;
27               imgElement.height=imgElement.height*1.5;
28           }
29           document.getElementsByTagName("div")[0].onmouseout=function(){
30               //将图片还原
31               var imgElement = document.images[0];
32               imgElement.width=x;
33               imgElement.height=y;
34           }
35           //全局变量
36           var x;
37           var y;
38       </script>
bubuko.com,布布扣

 

js 事件点击 显示 隐藏,布布扣,bubuko.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!