鼠标放到图片上慢慢变大，移开后图片又慢慢变小

最新推荐文章于 2023-03-13 14:26:40 发布

Visdelou

最新推荐文章于 2023-03-13 14:26:40 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： function

本文链接：https://blog.youkuaiyun.com/Reflect_ly/article/details/6203019

本文介绍了一个使用HTML和JavaScript实现的图片缩放效果。当鼠标悬停在图片上时，图片会逐渐放大；当鼠标移开时，图片再逐渐缩小到原始大小。此效果通过设置定时器逐步调整图片的宽度和高度来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title> 鼠标放到图片上慢慢变大，移开后图片又慢慢变小</title>
</head>
<body>
<img id=MainImg onmouseover=max() onmouseout=min() src="http://hiphotos.baidu.com/xdhhh/pic/item/23e4123ffb1983de55e7234b.jpg" width="1000" height="600"></a>
<script>
var i=0
//变大
function max(){
MImg=MainImg.style.pixelWidth+=i++
MainImg.style.pixelHeight=MImg*aaa
if(i<20)setTimeout('max()',100)
}
//变小
function min(){
MImg=MainImg.style.pixelWidth-=i--
MainImg.style.pixelHeight=MImg*aaa
if(i>0)setTimeout('min()',100)
}
function init(){
aaa=MainImg.height/MainImg.width
MainImg.style.pixelWidth=260
MainImg.style.pixelHeight=160
}
onload=init
</script>
</body>
</html>