网页中如何设置鼠标滑过图片放大的效果?
最近更新时间: September 19, 2023
在我们制作网页的时候，可能会需要设置这样一种效果：当我们鼠标滑动到图片的时候，图片会自动放大，今天给大家介绍一种简单的方法来实现这一效果，并且是纯css代码，不含任何js。
实现原理：使用css中的transition属性，设置图片放大过渡时间：transition: all 0.6s;0.6s即图片放大过渡时间为0.6秒;以及图片放大倍数：transform: scale(1.1);里面的1.1即原来图片的1.1倍。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
border: #000 solid 1px;
}
#div1 img {
cursor: pointer;/*鼠标指针更改为手指图标*/
transition: all 0.6s;/*图片变大过渡时间 all指整个元素*/
width:90%;
padding:5%;
}
#div1 img:hover {
transform: scale(1.1);/*图片变大倍数1.1即原来的1.1倍*/
}
</style>
</head>
<body>
<div id="div1"> <img src="hehua.png" width="90%"; /> </div>
</body>
</html>
额外说一点，图片尺寸设定方法，因为在图片放大的时候往往会超出原来块元素的边框，所以在这之前我们需要先计算出图片的原尺寸和放大后尺寸。
举个例子：
在这个例子中，div块元素包含图片，需要考虑的可能有：
div尺寸(300px*300px);
div边框(四边各占1px);
图片的原始长宽(400px*400px);
图片放到div之后的尺寸(div尺寸*90%=300*90%==270px*270px);
图片放大后的长宽(图片放到div之后的尺寸*1.1=270px*1.1==297px*297px);
图片内边距(图片放到div之后的尺寸*5%==270px*5%==13.5px)。
通过以上这些数据，我们可以根据需要对图片进行各种尺寸放大效果设置，这里有一个技巧，让内边距正好等于图片放大多增加的尺寸，比如以上图片内边距为5%，那么图片就放大原来的110%，且图片内边距只要不超过div边框即可，这样就不会出现图片放大后超出div(边框)的现象。
版权声明©：希望对您会有所帮助；转载请注明出处。
相关文章
