Js实现图片缩放上下左右移动效果

1、JS—Code：

var rate = 0.2;

var pp = document.getElementById("viewArea");

var vv = document.getElementById("picview");

var ie = document.all;

var nn6 = document.getElementById && !document.all;

//是否拖拽（默认否）

var isdrag = false;

var y, x; var st, sl;

//鼠标移动 function moveMouse(e) {

    if (isdrag) {

        var mouseX = nn6 ? e.clientX : event.clientX;

        var mouseY = nn6 ? e.clientY : event.clientY;

        vv.scrollTop = st + (y - mouseY);

        vv.scrollLeft = sl + (x - mouseX);

        return false;

    }

}

//拖拽

function initDrag(e) {

    var oDragHandle = nn6 ? e.target : event.srcElement;

    isdrag = true;

    x = nn6 ? e.clientX : event.clientX;

    y = nn6 ? e.clientY : event.clientY;

    st = vv.scrollTop;

    sl = vv.scrollLeft;

    document.onmousemove = moveMouse;

    return false;

}

pp.onmousedown = initDrag;

pp.onmouseup = new Function("isdrag=false");

//放大

function bigit() {

    pp.style.height = pp.height * (1 + rate) + "px";

    pp.style.width = pp.width * (1 + rate) + "px";

}

//缩小 function smallit() {

    pp.style.height = pp.height * (1 - rate) + "px";

    pp.style.width = pp.width * (1 - rate) + "px"; }

//原始大小 function realsize() {

    var newImg = new Image();

    newImg.src = pp.src;

    pp.style.height = newImg.height + "px";

    pp.style.width = newImg.width + "px"; }

//通过箭头移动图片 function clickMove(s) {

    if (s == "up") {

        vv.scrollTop = vv.scrollTop - 100;

    } else if (s == "down") {

        vv.scrollTop = vv.scrollTop + 100;

    } else if (s == "left") {

        vv.scrollLeft = vv.scrollLeft - 100;

    } else if (s == "right") {

        vv.scrollLeft = vv.scrollLeft + 100;

    } }

//交换图片 function changeImage(path) {

    pp.src = path;

    pp.style.width = "600px";

    vv.scrollTop = 0;

    vv.scrollLeft = 0;

}

2、ASPX页面源码：

 <div id="contral">
        <table>
            <tr>
                <td>
                    <img src="images/DragPic/down.png" width="27" height="14" οnclick="clickMove('down')"
                        title="DOWN" />
                </td>
                <td>
                    <img src="images/DragPic/up_icon.png" width="27" height="14" οnclick="clickMove('up')"
                        title="UP" />
                </td>
                <td>
                    <img src="images/DragPic/left.png" width="14" height="27" οnclick="clickMove('left')"
                        title="LEFT" />
                </td>
                <td>
                    <img src="images/DragPic/right_icon.png" width="14" height="27" οnclick="clickMove('right')"
                        title="RIGHT" />
                </td>
                <td>
                    <img src="images/DragPic/+_icon.png" width="25" height="25" οnclick="bigit();" title="ZOOM IN" />
                    <td>
                        <img src="images/DragPic/-_icon.png" width="25" height="5" οnclick="smallit();" title="ZOOM OUT" />
                    </td>
            </tr>
        </table>
    </div>
    <div class="pubbox kqzl">
        <div class="pubbox kqzl2" id="picview">
            <img width="240" height="449" alt="Moving" name="viewArea"
                id="viewArea" /><br />
            <br />
        </div>
    </div>
    <script src="Scripts/PicDrag.js" type="text/javascript"></script>

3、效果图：

转载于:https://www.cnblogs.com/dean-Wei/archive/2013/04/26/3045177.html