JavaScript 入门练习2：鼠标移入移出改变 div 大小
Posted 前端八宝粥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 入门练习2：鼠标移入移出改变 div 大小相关的知识，希望对你有一定的参考价值。
有一个位于屏幕正中央的红色 div 正方形盒子，宽高为200×200像素，鼠标移入（悬停），正方形会变成400×400像素，鼠标移出，正方形恢复200×200像素。
使用 CSS3、javascript 两种方式实现。
效果如下图：
用到的知识点：
1、让盒子居中会用到 margin、padding。
2、 ：hover 伪类选择器。一个标签后面有一个冒号，又跟着一个东西这样的写法就叫做伪类。
：hover 属于锚伪类，锚伪类分为：（以 a 标签为例）
a:link {color: #FF0000} 未访问的链接
a:visited {color: #00FF00} 已访问的链接
a:hover {color: #FF00FF} 鼠标移动到链接上
a:active {color: #0000FF} 选定的链接
通过以上四句代码可以控制在点击 a 标签点击前后实现的效果。
对于 IE6 浏览器来说，它支持对 a 标签设置伪类，但是其他标签如果设置伪类，比如我们下面的代码里面的 div：hover ，IE6 就无法显示。如果需要让 IE6 显示 div：hover 的效果，是需要使用 JavaScript 来实现的。
2、有些 html 标签有默认的 margin、padding 值，需要在样式表中手动把这些值清零，否则可能会影响我们的排布效果
3、标签=元素
4、定位分为相对定位和绝对定位，相对定位是 relative，绝对定位是 absolute。我们这里使用绝对定位。关于定位的知识以后在用到的时候会再详细说明。
代码如下：
1、使用 CSS3 实现
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 *{ margin:0; padding:0; } 11 div{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin:-100px 0 0 -100px; } 12 13 div:hover{ width:400px; height:400px; margin:-200px 0 0 -200px; } 14 </style> 15 <script> 16 17 </script> 18 </head> 19 20 <body> 21 <div></div> 22 </body> 23 </html>
2、使用 JavaScript 实现
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 6 <meta name="apple-mobile-web-app-capable" content="yes"> 7 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 8 <title></title> 9 <style> 10 *{ margin:0; padding:0; } 11 div{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 12 13 </style> 14 <script> 15 window.onload=function (){ 16 var oBox=document.getElementById(\'box\'); 17 18 oBox.onmouseover=function (){ 19 oBox.style.width=\'400px\'; 20 oBox.style.height=\'400px\'; 21 oBox.style.marginLeft=\'-200px\'; 22 oBox.style.marginTop=\'-200px\'; 23 }; 24 oBox.onmouseout=function (){ 25 oBox.style.width=\'200px\'; 26 oBox.style.height=\'200px\'; 27 oBox.style.marginLeft=\'-100px\'; 28 oBox.style.marginTop=\'-100px\'; 29 }; 30 }; 31 </script> 32 </head> 33 34 <body> 35 <div id="box"></div> 36 </body> 37 </html>
这里的 marginLeft、marginTop 可以写在同一行，鼠标移入可以使用 oBox.style.margin=\'-200px 0 0 -200px\'; ，鼠标移出可以使用 oBox.style.margin=\'-100px 0 0 -100px\'; 。
单引号里面的值分别表示上、右、下、左四个方位对应的值。
以上是关于JavaScript 入门练习2：鼠标移入移出改变 div 大小的主要内容，如果未能解决你的问题，请参考以下文章