master

分支 (1)

管理

管理

master

hongxin-huanke-oil-depot
/
合起来.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1580px;
            height: 910px;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;
        }

        div img {
            position: absolute;
            height: 100%;
            width: auto;
            cursor: move;
        }
        #btn1{
            position: absolute;
            right: 20px;
            bottom: 60px;
        }
        #btn2{
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div id="div" onmousewheel="return bbimg(this)">
    <img id="img" border="0" src="img/map_img.jpg" style="height: 100%;width: 100%;" class="pic"/>
    <img id="smallImg" src="img/tb1.png" alt="" style="width: 60px;height: 60px;">
    <button id="btn1" onclick="bigit()">放大</button>&nbsp;&nbsp;<button id="btn2" onclick="littleit()">缩小</button>
</div>
<script language="javascript">
    var params = {
        zoomVal:1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false
    };
    //图片缩放
    function bbimg(o){
        var o=o.getElementsByTagName("img")[0];
        params.zoomVal+=event.wheelDelta/1200;
        if (params.zoomVal >= 0.5) {
            o.style.transform="scale("+params.zoomVal+")";
        } else {
            params.zoomVal=0.5;
            o.style.transform="scale("+params.zoomVal+")";
            return false;
        }
    }
    //获取相关CSS属性
    var getCss = function(o,key){
        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
    };
    //拖拽的实现
    var startDrag = function(bar, target, callback){
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
        //o是移动对象
        bar.onmousedown = function(event){
            params.flag = true;
            if(!event){
                event = window.event;
                //防止IE文字选中
                bar.onselectstart = function(){
                    return false;
                }
            }
            var e = event;
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        document.onmouseup = function(){
            params.flag = false;
            if(getCss(target, "left") !== "auto"){
                params.left = getCss(target, "left");
            }
            if(getCss(target, "top") !== "auto"){
                params.top = getCss(target, "top");
            }
        };
        document.onmousemove = function(event){
            var e = event ? event: window.event;
            if(params.flag){
                var nowX = e.clientX, nowY = e.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX+ "px";
                target.style.top = parseInt(params.top) + disY+ "px";
                if (typeof callback == "function") {
                    callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                }
                if (event.preventDefault) {
                    event.preventDefault();
                }
                return false;
            }
        }
    };
    /* 大图片的拖拽 */
    startDrag(document.getElementById("img"),document.getElementById("img"));

    /* 小图片的拖拽 */
    startDrag(document.getElementById("smallImg"),document.getElementById("smallImg"));


    function bigit(){
        var image=document.getElementsByClassName("pic")[0];
        image.style.height=image.height*1.1+'px';
        image.style.width=image.width*1.1+'px';
    }
    function littleit(){
        var image=document.getElementsByClassName("pic")[0];
        image.style.height=image.height/1.1+'px';
        image.style.width=image.width/1.1+'px';
    }
</script>
</body>
</html>