怎么用js实现图片的缩小？

JavaScript032

怎么用js实现图片的缩小？,第1张

一般来说，实现图片的放大缩小功能都用到了比较大的封装插件，特别是以jQuery插件居多，而实际上单纯实现对原图本身的放大缩小，用简单几行原生JS代码就可以做到。在今天分享的这个实例中，点击放大按钮不松鼠标，图片会不断的逐渐放大，当然也可以点一下放大一点，点击缩小按钮则反之，有需要的朋友可以考虑收藏备用哦

以下为全部代码：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html charset=utf-8" />

        <title>javascript控制图片缩小或者放大</title>

    </head>

    <body>

        <script type="text/javascript">

            var oTime

            function changeSize(id,action){

             var obj=document.getElementById(id)

             obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%'

             oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100)

            }

            document.onmouseup=function(){

             window.clearTimeout(oTime)

            }

        </script>

        <div style="height:350px overflow: auto">

        <img id="headImg" src="

        <button onmousedown="changeSize('headImg','+')" onmouseup="window.clearTimeout(oTime)">放大</button>

        <button onmousedown="changeSize('headImg','-')" onmouseup="window.clearTimeout(oTime)">缩小</button>

    </body>

</html>

这个是因为在flexy-menu.js中对窗口缩放进行了控制。当窗口缩放的后的宽度小于768时，菜单就会被隐藏。这里我把这个功能给去除了，缩放时菜单将不再会被隐藏了。

附件是修改好了的文件，可以直接使用。