使用CSS3实现鼠标移到图片上图片放大
生活随笔
收集整理的這篇文章主要介紹了
使用CSS3实现鼠标移到图片上图片放大
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
轉自http://www.webkaka.com/tutorial/html/2017/072731/
在現在的網頁設計中，鼠標移到圖片上圖片放大的效果常常被用到，這個效果多應用于文章列表里。我一開始以為是用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屬性去掉，其他代碼不變。
總結
以上是生活随笔為你收集整理的使用CSS3实现鼠标移到图片上图片放大的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ajax 的 onreadystatec
- 下一篇： 计算机视觉课_计算机视觉教程—第4课