在现在的网页设计中,鼠标移到图片上图片放大的效果常常被用到,这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的,后来才知道原来是用CSS3来实现的。虽然用JQuery也能实现同样的效果,但用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。
请把鼠标移到图片上。
看到效果是:鼠标移到图片上时,图片会自动放大。
CSS3实现方法如下:
<!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里的区域,那么我们只需把div的overflow属性去掉即可,不能设为 auto,否则div出现滚动条。
请把鼠标移到图片上。
html代码如下:
<!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属性去掉,其它代码不变。
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
你可能也喜欢
- ♥ 如何设计一个吸引用户的网站?08/09
- ♥ 企业建站的常识11/17
- ♥ 怎样快速搭建自己的网站?05/29
- ♥ 高端的企业网站制作需要多少钱?07/27
- ♥ 网站建设团队如何进行分工?08/09
- ♥ 网站建设有哪些类型?07/22