js 图片放大缩小(动画效果)

本文介绍如何利用JavaScript实现图片在鼠标滑过时逐渐放大,滑离时逐渐缩小的动画效果。通过调整CSS宽高并在定时器中逐步改变图片尺寸,结合setInterval和setTimeout来控制动画流程。当鼠标快速移动时,需注意避免重复开启缩小定时器。目前方案限制图片仅能从顶端向下放大,期待改进建议。

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

本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小。下面分析整个过程:
图片逐渐放大缩小怎么实现?
1、用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通过js 调节图片的宽高就可以实现图片放大缩小。
2、逐渐放大就需要在微小的时间段中对图片成比例放大,就需要用到定时函数。
定时函数: setInterval(fun,time)在定时后不断执行,直到清除定时(clearInterval(timer);)
setTimeout(fun,time)定时后执行一次,无论是否清除定时,都只会执行一次
3、综合分析需要使用setInterval定时,然后在定时函数中成倍方法缩小图片宽高就ok.
4、在完成上面设计之后会发现在鼠标快速移动过程中图片会一直缩小,分析发现是鼠标移走后总会开启smaller定时,加上函数中注释中的判断问题就解决了
5、存在的问题:改方法中图片只能从顶端往下放大,无法从中间向两边放大,怎么更改还wang各位提出自己的想法,tks~!

<script> /* ------------------------------------------ 图片放大缩小(动画效果) ------------------------------------------- */ //图片所在的DIV var headers = document.getElementsByClassName("course-preview"); var images = document.getElementsByClassName("course-preview-image"); var bs = 1.02//图片放大的倍数 var maxwidth = 220;//图片最大宽度 var minwidth = 210;//图片最小宽度 function bigorsmall(){ for(var i = 0;i < headers.length;i++){ var headermy = headers[i]; headermy.index = i; headermy.onmouseover = bigger; headermy.onmouseout = smaller; } } function bigger(){ if(typeof(timer) != "undefined") clearInterval(timer); var index = this.index; var image = images[index]; timer = setInterval(function(){ var w = image.offsetWidth; var h = image.offsetHeight; if(w > maxwidth ) { clearInterval(timer); } image.style.width = (w * bs) + 'px'; image.style.height = (h * bs) + 'px'; },100); } function smaller(){ if(typeof(timer2) != "undefined") clearInterval(timer2); var images = document.getElementsByClassName("course-preview-image"); var index = this.index; var image = images[index]; clearInterval(timer); //只有当图像的宽度大于一定值时在开启定时,否则在快速移动鼠标的过程中总会开启定时 if(image.offsetWidth > minwidth){ timer2 = setInterval(function(){ var w = image.offsetWidth; var h = image.offsetHeight; if(w <= minwidth){ clearInterval(timer2); } image.style.width = (w / bs) + 'px'; image.style.height = (h / bs) + 'px'; },100); } } </script>

转载于:https://my.oschina.net/u/2563638/blog/709095

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值