JavaScript图片等比例缩放 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript图片等比例缩放</title>
<script src="https://files.cnblogs.com/lostboy/utils.js" type="text/javascript"></script>
</head>
<body>
<div class="pages" id="page">    
    <img id="imgid" src="http://pic1.win4000.com/pic/1/7a/5b7d288647.jpg" />
    <img id="imgid-thumb" src="http://pic1.win4000.com/pic/1/7a/5b7d288647.jpg" />
    <div class="button">
        <input type="button" name="btn-narrow" value="缩小图片" />
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        var img = document.getElementById("imgid");
        var imgthumb = document.getElementById("imgid-thumb");
        imgResize(img, 320, 480);
        imgResize(imgthumb, 100, 100);

        //点击缩小图片按钮
        var btnObj = document.getElementsByName("btn-narrow")[0];
        btnObj.onclick = function () {
            if (btnObj.value == "缩小图片") {
                btnObj.value = "放大图片";
                imgResize(img, 160, 240);
            } else {
                btnObj.value = "缩小图片";
                imgResize(img, 320, 480);
            }
        }
    }
</script>
</body>
</html>

下面有运行效果，大家可以看看

JavaScript图片等比例缩放

posted @ 2013-03-08 01:26  最佳损友。  阅读(337)  评论(0)    收藏  举报