亚洲AV无码成人网站久久精品大,亚洲高清专区日韩精品

技術(shù)頻道 - html技術(shù)

鼠標(biāo)移到圖片上圖片放大【css3實(shí)例】

作者:admin 時(shí)間:2017-7-27 22:45:59 瀏覽:

在現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中，鼠標(biāo)移到圖片上圖片放大的效果常常被用到，這個(gè)效果多應(yīng)用于文章列表里。我一開始以為是用JQuery來(lái)實(shí)現(xiàn)的，后來(lái)才知道原來(lái)是用CSS3來(lái)實(shí)現(xiàn)的。雖然用JQuery也能實(shí)現(xiàn)同樣的效果，但用CSS3來(lái)實(shí)現(xiàn)會(huì)更加簡(jiǎn)單和方便。本文將介紹如何用CSS3來(lái)實(shí)現(xiàn)這個(gè)功能。

在介紹實(shí)現(xiàn)代碼之前，我們先來(lái)看看效果演示吧。

請(qǐng)把鼠標(biāo)移到圖片上

看到效果是：鼠標(biāo)移到圖片上時(shí)，圖片會(huì)自動(dòng)放大。

CSS3實(shí)現(xiàn)方法如下：

HTML代碼

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

execcode getcode

代碼分析：

1、首先知道DIV和IMG的層次關(guān)系，IMG是在某DIV里面，圖片放大后不應(yīng)該超出DIV的盒子。

2、設(shè)置DIV的 overflow: hidden; 屬性，作用是圖片變大后超過(guò)DIV區(qū)域的部分會(huì)自動(dòng)隱藏。

3、設(shè)置 transition: all 0.6s; 屬性和 transform: scale(1.4); 屬性，其中 transition: all 0.6s; 是變化速度，數(shù)值越小速度越快，而 transform: scale(1.4); 是變化范圍， scale(1.4) 是放大1.4倍的意思。

實(shí)例二：圖片放大不受限于DIV盒子

如果想圖片放大后完全顯示，而不是只顯示DIV里的區(qū)域，那么我們只需把div的 overflow 屬性去掉即可，不能設(shè)為 auto ，否則div出現(xiàn)滾動(dòng)條。效果演示如下：

請(qǐng)把鼠標(biāo)移到圖片上

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>