JavaScript图片等比例缩放

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JavaScript图片等比例缩放</title>

<script src="http://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图片等比例缩放

JavaScript图片等比例缩放 JavaScript图片等比例缩放

你可能感兴趣的:(JavaScript)