js 图片放大缩小（动画效果）

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