点击相关按钮,图片放大放小

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .wrap{
                width: 100px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491155329182&di=d4de15ebf6db888e7a5a6beb9a84f487&imgtype=0&src=http%3A%2F%2Fimg13.360buyimg.com%2Fn4%2Fjfs%2Ft577%2F42%2F815970364%2F146404%2F4307cc0e%2F54ade3c5Naf9c500e.jpg" alt="" id="img1"/><br />
            <input type="button" value="放大" id="btn1"/>
            <input type="button" value="缩小" id="btn2"/>
        </div>
        <script>
            window.onload=function(){
                var oImg=document.getElementById('img1');
                var oBtn1=document.getElementById('btn1');
                var oBtn2=document.getElementById('btn2');
                var maxWidth=oImg.width*2;
                var maxHeight=oImg.height*2;
                var minWidth=oImg.width*0.7;
                var minHeight=oImg.height*0.7;
                oBtn1.onclick=function(){
                    maxFun();
                }
                function maxFun(){
                    var addWidth=oImg.width*1.3;
                    var addHeight=oImg.height*1.3;
                    var timer=setInterval(function(){
                        if(oImg.width<addWidth){
                            if(oImg.width<maxWidth){
                                oImg.width=oImg.width*1.05;
                                oImg.height=oImg.height*1.05;
                            }else{
                                alert('图片不能再放大了!')
                                clearInterval(timer);
                            }
                        }else{
                            clearInterval(timer);
                        }
                    },120)
                }
                oBtn2.onclick=function(){
                    minFun();
                }
                function minFun(){
                    var subWidth=oImg.width*0.7;
                    var subHeight=oImg.height*0.7;
                    var timer=setInterval(function(){
                        if(oImg.width>subWidth){
                            if(oImg.width>minWidth){
                                oImg.width=oImg.width*0.95;
                                oImg.height=oImg.height*0.95;
                            }else{
                                alert('图片不能再放小了!');
                                clearInterval(timer);
                            }
                        }else{
                            clearInterval(timer);
                        }
                    },120)
                }
            }
        </script>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 点击相关按钮,图片放大放小

赞 (2)
分享到:更多 ()

发表评论 0