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‘; 。

单引号里面的值分别表示上、右、下、左四个方位对应的值。

时间: 2024-10-07 20:45:44

JavaScript 入门练习2:鼠标移入移出改变 div 大小的相关文章

[读码时间] 图片列表:鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

函数传参,改变Div任意属性的值&amp;&amp;图片列表:鼠标移入/移出改变图片透明度

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

鼠标移入/移出改变样式

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

鼠标移入移出改变透明度

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>鼠标移入移出改变透明度</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="

React练习 5 :鼠标移入移出改变样式

需求:鼠标移入/移出div范围时,样式发生改变 import React,{useState,useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; function ChangeStyle(){ const [isHover,setHover]=useState(false); return( <div id="div1" className={isHover ? 'hov

对于jq实现带有二级导航的,鼠标移入移出改变css属性样式

1.布局:一级导航用ul li ,二级导航在li 里面可以嵌套div实现 <li class="pull-active"> <a href="">资讯</a> <!-- 二级导航 --> <div class="ul ulH3"> <div class="li"> <a href="">活动</a> </d

JS添加、设置属性以及鼠标移入移出事件

源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; } #wk{ width:100px; } .pname{ width: 100px; height: 50px; line-height: 50p

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g

展现与收起效果(鼠标移入移出)

效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出展现与收起效果</title> <style type="text/css"> body{ margin: 0 auto; padding: 0; } #pn{ background: #