JS实例（三）图片的缓慢放大和缩小

　　我们经常能看到在一些网站中可以通过按钮实现对图片的放大或者缩小，也有可能是鼠标经过时图片放大。在本例中就是通过JavaScript实现图片的放大和缩小。

　　首先是进行简单的页面布局

<div class="imagedispose">
        <img src="1.jpeg" id="imaged" width="400px" height="300px"></br>
        <input type="button" id="max" value="放大"></input>
        <input type="button" id="min" value="缩小"></input>
    </div>

　　添加基础样式

*{
        padding: 0;
        margin: 0;
    }
    .imagedispose{
        width: 600px;
        margin: 0 auto;
    }

　　接下来就是JavaScript的实现。先简述一下思路，本例的效果是图片可以放大或缩小，当放大或缩小到一定程度时，会停止放大缩小，并且提醒用户已经放大或缩小到极限值了。

这就需要嵌套两个if..else语句，一个判断是否达到每次放大或者缩小的最值，另一个判断是否达到图片放大或者缩小的极限。

　　整个JavaScript代码在window.onload事件中，目的是等页面加载完成之后再执行script代码，因为JavaScript可能会获取页面的元素，这样保证JavaScript获取时元素是存在的。

　　设置图片放大或缩小的极限值

　　var maxwidth = imgid.width*2;
　　var maxheight = imgid.height*2;
　　var minwidth = imgid.width*0.4;
　　var minheight = imgid.height*0.4;

　　再看放大函数部分，首先定义每次放大的最值。使用定时器执行函数，函数中有两个判断语句，不成立则执行clearInterval()，就不再放大。缩小函数同理可得。

function maxFun()
            {
                var endwidth = imgid.width*1.3;   //每次点击之后的宽度
                var endheight = imgid.height*1.3;   //每次点击之后的高度
                var maxTimer = setInterval(function(){
                    if (imgid.width<endwidth) {
                        if (imgid.width<maxwidth) {
                    imgid.width = imgid.width*1.05;
                    imgid.height = imgid.height*1.05;
                    }
                    else{
                        alert('已经放大到最大值了！');
                        clearInterval(maxTimer);
                    }
                }
                else{
                    clearInterval(maxTimer);
                }
                },20);
            }

　　下面是完整的JavaScript代码

window.onload = function(){      //
            var maxbutton = document.getElementById("max");
            maxbutton.onclick = function(){
                maxFun();              //添加放大事件
            }
            var minbutton =document.getElementById("min");
            minbutton.onclick =function(){
                minFun();         //添加缩小事件
            }
            var imgid = document.getElementById("imaged");
            var maxwidth = imgid.width*2;
            var maxheight = imgid.height*2;
            var minwidth = imgid.width*0.4;
            var minheight = imgid.height*0.4;
            function maxFun()
            {
                var endwidth = imgid.width*1.3;   //每次点击之后的宽度
                var endheight = imgid.height*1.3;   //每次点击之后的高度
                var maxTimer = setInterval(function(){
                    if (imgid.width<endwidth) {
                        if (imgid.width<maxwidth) {
                    imgid.width = imgid.width*1.05;
                    imgid.height = imgid.height*1.05;
                    }
                    else{
                        alert('已经放大到最大值了！');
                        clearInterval(maxTimer);
                    }
                }
                else{
                    clearInterval(maxTimer);
                }
                },20);
            }
            function minFun()
            {
                var endwidth = imgid.width*0.8;   //每次点击之后的宽度
                var endheight = imgid.height*0.8;   //每次点击之后的高度
                var minTimer = setInterval(function(){
                    if (imgid.width>endwidth) {
                        if (imgid.width>minwidth) {
                    imgid.width = imgid.width*0.95;
                    imgid.height = imgid.height*0.95;
                    }
                    else{
                        alert('已经缩小到最小值了！');
                        clearInterval(minTimer);
                    }
                }
                else{
                    clearInterval(minTimer);
                }
                },20);
            }
        }

　　这只是一个简单的例子，当然还有很多引申。可以将鼠标点击图片放大换成鼠标经过图片放大。也可以将函数进行修改，比如鼠标点击图片平移、旋转等等。