js实现图片查看器（图片的缩放、旋转、拖拽）

一、关于图片查看器。

　　目前网络上能找到的图片查看器很多，谁便一搜就能出来。如：jquery.iviewer.js、Viewer.js这两个js文件，其中功能也足够满足大部分开发需求。但是单纯的就想实现图片的缩放、旋转、回位、拖拽。这些插件就有些多余，而且里面代码还没看。所以这里向大家介绍一种图片查看器的实现方法！

二、简单的Demo构造

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    </style>

    <script type="text/javascript">

    function load() {

        init();

    }

        // 缩放图片

        function imgToSize(oBool) {

            var pic = document.getElementById("pic");

            var text=document.getElementById("smw");

            pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';

            text.defaultValue=pic.style.zoom;

        }

        //还原尺寸

        function restore() {

            var pic = document.getElementById("pic");

            var text=document.getElementById("smw");

            pic.style.zoom = '100%';

            pic.style.left = "0px";

            pic.style.top = "0px";

            text.defaultValue=pic.style.zoom;

        }

        // 旋转图片

        var current = 0;

        function imgRoll(direction) {

            var pic = document.getElementById("pic");

            if (direction == "left") {

                current = (current - 90) % 360;

            }

            else if (direction == "right") {

                current = (current + 90) % 360;

            }

            pic.style.transform = 'rotate(' + current + 'deg)';

        }

        //图片拖拽

        drag = 0;

        move = 0;

        function mousedown() {

            if (drag) {

                X1 = window.event.x - parseInt(pic.style.left);

                Y1 = window.event.y - parseInt(pic.style.top);

                move = 1;

            }

        }

        function onmouseover() {

            drag = 1;

        }

        function mouseStop() {

            window.event.returnValue = false;

        }

        function mousemove() {

            if (move) {

                pic.style.left = (window.event.x - X1) + "px";

                pic.style.top = (window.event.y - Y1) + "px";

            }

        }

        function mouseup() {

            move = 0;

        }

        function init() {

            var pic = document.getElementById("pic");

            pic.style.zoom="100%";

            pic.style.left="0px";

            pic.style.top="0px";

            pic.style.position="relative";

            pic.style.cursor="move";

            document.all.pic.onmouseover = onmouseover;

            document.all.pic.onmousemove = mousemove;

            document.all.pic.onmousedown = mousedown;

            document.all.pic.onmouseup = mouseup;

            document.all.pic.ondragstart = mouseStop;

        }

    </script>

</head>

<body onload="load()">

    <div>

        <img id="pic" src="data:image/Hydrangeas.jpg" />

    </div>

<br/>

<div class="btn">

    <button class="btnleft" onclick="imgRoll('left');">左旋转90度</button>

    <button class="btnright" onclick="imgRoll('right');">右旋转90度</button>

    <button class="btnup" onclick="imgToSize(1);">放大</button>

    <button class="btndown" onclick="imgToSize(0);">缩小</button>

    <button class="btnreturn" onclick="restore();">还原</button>

    <input type="text" value="100%" id="smw"/>

</div>

</body></html>

三、代码功能实现和说明

　　其实图片查看器，其中的原理就是实现图片的Zoom、Tranfrom、坐标的控制

　　1、缩放功能

        // 缩放图片

        function imgToSize(oBool) {

            var pic = document.getElementById("pic");

            var text=document.getElementById("smw");

            pic.style.zoom = parseInt(pic.style.zoom) + (oBool ? 2 : -2) + '%';

            text.defaultValue=pic.style.zoom;

        }

这方法就是，每次点击一次控制图片的Zoom增减。其中oBool是用来区别是放大和缩小（就是ZooM的缩减）

　　2、图片的旋转

        // 旋转图片

        var current = 0;

        function imgRoll(direction) {

            var pic = document.getElementById("pic");

            if (direction == "left") {

                current = (current - 90) % 360;

            }

            else if (direction == "right") {

                current = (current + 90) % 360;

            }

            pic.style.transform = 'rotate(' + current + 'deg)';

        }

这方法就是，每点击一次图片按顺时针或逆时针旋转，direction是来区分顺（right）逆(left)旋转的方向。

　　3、图片的还原

        function restore() {

            var pic = document.getElementById("pic");

            var text=document.getElementById("smw");

            pic.style.zoom = '100%';

            pic.style.left = "0px";

            pic.style.top = "0px";

            text.defaultValue=pic.style.zoom;

        }

这方法就是，将图片从新初始化

　　4、图片的拖拽

        //图片拖拽

        drag = 0;

        move = 0;

        function mousedown() {

            if (drag) {

                X1 = window.event.x - parseInt(pic.style.left);

                Y1 = window.event.y - parseInt(pic.style.top);

                move = 1;

            }

        }

        function onmouseover() {

            drag = 1;

        }

        function mouseStop() {

            window.event.returnValue = false;

        }

        function mousemove() {

            if (move) {

                pic.style.left = (window.event.x - X1) + "px";

                pic.style.top = (window.event.y - Y1) + "px";

            }

        }

        function mouseup() {

            move = 0;

        }

这个方法就是，实现这个首先对鼠标几个事件的了解mousedwon()鼠标的按下事件、onmouseover()鼠标在对应标签上方事件、mouseStop()鼠标停止运动事件、mousemove()鼠标移动事件、mouseup()松开鼠标键的事件。然后再看代码定义2个标准变量drag、move

　　5、初始化，也就是得注意事项

        function init() {

            var pic = document.getElementById("pic");

            pic.style.zoom="100%";

            pic.style.left="0px";

            pic.style.top="0px";

            pic.style.position="relative";

            pic.style.cursor="move";

            document.all.pic.onmouseover = onmouseover;

            document.all.pic.onmousemove = mousemove;

            document.all.pic.onmousedown = mousedown;

            document.all.pic.onmouseup = mouseup;

            document.all.pic.ondragstart = mouseStop;

        }

初始化市将控制按钮绑定对应的事件，然后再将图片的样式属性，其中top、left得赋值，如果不赋值的化，默认值是无法获取然后不能参加后续的运算，就无法实现对应的效果！