用js操作元素的一些属性达到放大或者缩小元素(实例中放大缩小div) 
<!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>

 

posted on 2016-05-26 23:26  冬刻忆  阅读(2078)  评论(0)    收藏  举报