<!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 » 点击相关按钮,图片放大放小