本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小。下面分析整个过程:
图片逐渐放大缩小怎么实现?
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.getElementsByClass