鼠标滑过图片放大

最新推荐文章于 2021-08-24 14:04:30 发布

GodTyler

最新推荐文章于 2021-08-24 14:04:30 发布

阅读量497

点赞数

分类专栏： html 文章标签：鼠标滑过鼠标移动到图片上放大鼠标滑过图片放大

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
  width: 200px;
  height: 138px;
  border: #000 solid 1px;
  margin: 50px auto;
  overflow: hidden;
}
#div1 img{
  cursor: pointer;
  transition: all 0.6s;
}
#div1 img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
  <img src="demo.jpg" />
</div>
</body>
</html>

代码分析：

1、首先知道DIV和IMG的层次关系，IMG是在某DIV里面，图片放大后不应该超出DIV的盒子。

2、设置DIV的 overflow: hidden; 属性，作用是图片变大后超过DIV区域的部分会自动隐藏。

3、设置 transition: all 0.6s; 属性和 transform: scale(1.4); 属性，其中 transition: all 0.6s; 是变化速度，数值越小速度越快，而 transform: scale(1.4); 是变化范围， scale(1.4) 是放大1.4倍的意思。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

如果想图片放大后完全显示，而不是只显示DIV里的区域，那么我们只需把div的 overflow 属性去掉即可，不能设为 auto ，否则div出现滚动条。效果演示如下：

鼠标移到图片上图片放大

请把鼠标移到图片上

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
  width: 200px;
  height: 138px;
  border: #000 solid 0px;
  margin: 50px auto;
  /* overflow: hidden; */
}
#div1 img{
  cursor: pointer;
  transition: all 0.6s;
}
#div1 img:hover{
  transform: scale(1.4);
}
</style>
</head>
<body>
<div id="div1">
<img src="demo.jpg" />
</div>
</body>
</html>

代码分析：

把div的 overflow 属性去掉，其他代码不变。

原文章: http://www.webkaka.com/tutorial/html/2017/072731/