<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>放大缩小图片</title> <style type="text/css"> </style> </head> <body> <img src="../images/1.jpg" alt="#" id="img1" style="width:290px;height:400px"> <input type="button" value="-" id="btn1"> <input type="button" value="+" id="btn2"> <script type="text/javascript"> var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); var oImg = document.getElementById("img1"); var num1 = 400; //高 var num2 = 290; //宽 //缩小图片 oBtn1.onclick = function(){ num2 -=20; //宽 num1 -=15; //高 if(num2>=215&&num1>=300){ oImg.style.width = num2+'px'; oImg.style.height = num1+'px'; } } //放大图片 oBtn2.onclick = function(){ num2 +=20; //宽 num1 +=15; //高 if(num2<=390&&num1<=475){ oImg.style.width = num2+'px'; oImg.style.height = num1+'px'; } } </script> </body> </html>
浙公网安备 33010602011771号