一、关于图片查看器。

　　目前网络上能找到的图片查看器很多，谁便一搜就能出来。如：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="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得赋值，如果不赋值的化，默认值是无法获取然后不能参加后续的运算，就无法实现对应的效果！