关于一个简易web地图的实现请各位高手帮忙

showbo
要学习了.....さようなら
等级:

发表于：2008-06-11 12:00:103楼得分:100

以前收藏的一个，你看看合适不合适

HTML code


<html>
<head><title>
</title>

    <script type="text/javascript" src="function.js"></script>

    <script type="text/javascript" src="PicView.js"></script>

    <script type="text/javascript">
    var Pic;
    window.onload = function(){
        Pic = new PicView("idShowpic", 700, 500);
        Pic.Load("http://b2b.lvyou168.cn/companys/images/Pwri806396.jpg");
    }
    </script>

</head>
<body>
            <table align="center" style="border: solid 1px #C0C0C0;">
                <tr>
                    <td align="center">
                        <input name="" type="button" onclick="Pic.ZoomIn()" value="放大" />
                        <input name="" type="button" onclick="Pic.Reset()" value="实际大小" />
                        <input name="" type="button" onclick="Pic.Default()" value="最适合" />
                        <input name="" type="button" onclick="Pic.ZoomOut()" value="缩小" />
                    </td>
                </tr>
                <tr height="470">
                    <td align="center">
                        <div id="idShowpic">
                        </div>
                    </td>
                </tr>
            </table>
</body>
</html>

function.js

JScript code

// JavaScript Document
var isIE = (document.all) ? true : false;

var isIE6 = isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1);

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var $C = function (id) {
    return $(id).style;
};

var ajax = function(sURL, fnHandler){
    var xmlhttp;
    try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
    catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
    catch (e) { try { xmlhttp = new XMLHttpRequest(); }
    catch (e) { return null; }}}
    try {
        xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                fnHandler(xmlhttp.responseText);
        };
        xmlhttp.open("GET", sURL, true);
        xmlhttp.send("");
    } catch(z) { return null; }
}


String.prototype.matchOf = function(sValue){
    return (this.toUpperCase().indexOf(sValue.toUpperCase()) >= 0);
}


var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}


function addEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.addEventListener) {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } else if (oTarget.attachEvent) {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } else {
        oTarget["on" + sEventType] = fnHandler;
    }
};

function removeEventHandler(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};

function Event(e){
    var oEvent = isIE ? window.event : e;
    if (isIE) {
        oEvent.target = oEvent.srcElement;
        oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft;
        oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;
        oEvent.preventDefault = function () { this.returnValue = false; };
        oEvent.detail = oEvent.wheelDelta / (-40);
    }
    return oEvent;
}


function SetSelects(css) {
    selects = document.getElementsByTagName("select");
    var len = selects.length;
    for (i = 0; i != len; i++)
        selects[i].style.visibility = css;
}

picview.js

JScript code

var PicView = Class.create();
PicView.prototype = {
  initialize: function(idDiv, iWidth, iHeight) {
    var oPicView = this, oDiv = document.getElementById(idDiv);
    
    iWidth = iWidth > 0 ? iWidth : 100;
    iHeight = iHeight > 0 ? iHeight : 100;
    //div
    oDiv.style.filter = "Alpha(100)";
    oDiv.style.cursor = "pointer";
    oDiv.style.overflow = "hidden";
    oDiv.align = "center";
    oDiv.style.width = iWidth + "px";
    oDiv.style.height = iHeight + "px";
    
    this.oDiv = oDiv;
    this.iDiffX = 0;
    this.iDiffY = 0;
    this.timer = null;
    this.isDrag = false;
    this.DefaultWidth = iWidth;
    this.DefaultHeight = iHeight;
    this.iCount = 0;
    
    if (isIE){
        oDiv.ondrag = function(){ return false; };
        oDiv.onmousewheel = function(){ oPicView.MouseCtrl(); };
    } else { addEventHandler(oDiv, "DOMMouseScroll", function(e){ oPicView.MouseCtrl(e); }); };
    oDiv.onmousedown = function(e){ oPicView.MouseDown(e); return false; };
    addEventHandler(document.body, "mousemove", function(e){ oPicView.MouseMove(e); });
    addEventHandler(document.body, "mouseup", function(){ oPicView.MouseUp(); });    
  },
  //
  Load: function(sUrl){
    if ("" == sUrl || null == sUrl) return;
    var imgTemp = new Image(), i = ++this.iCount, oPicView = this;
    imgTemp.onload = function(){
        if(i < oPicView.iCount) return;
        var oDiv = oPicView.oDiv, oImg = document.createElement("img");
        if (oPicView.oImg) oDiv.removeChild(oPicView.oImg);
        oPicView.oImg = oImg;
        oPicView.iChange = 0;
        oDiv.style.paddingTop = "0px";
        oDiv.style.height = oPicView.DefaultHeight + "px";
        oDiv.scrollTop = oDiv.scrollLeft = 0;
        oImg.onload = function(){
            oPicView.iOriginal = oImg.width;
            oPicView.iIratio = oImg.width / oImg.height;
            oPicView.Default();
            oDiv.appendChild(oImg);
        }
        oPicView.oImg.src = sUrl;
    }
    imgTemp.src = sUrl;
  },
  //
  SetPic: function(iZoom){
    var oImg = this.oImg, oDiv = this.oDiv, iWidth = oImg.width + iZoom, iHeight = iWidth / this.iIratio, iSpacing = this.DefaultHeight - iHeight;
    oImg.width = iWidth; oImg.height = iHeight;
    //
    if (iSpacing > 0) {
        iSpacing /= 2;
        oDiv.style.paddingTop = iSpacing + "px";
        oDiv.style.height = this.DefaultHeight - iSpacing + "px";
    } else {
        oDiv.style.paddingTop = "0px";
        oDiv.style.height = this.DefaultHeight + "px";
    };
    //
    oDiv.scrollLeft += iZoom * (oDiv.scrollLeft + this.DefaultWidth / 2) / iWidth;
    oDiv.scrollTop += iZoom * (oDiv.scrollTop + this.DefaultHeight / 2) / iHeight;
  },
  //
  ZoomIn: function(){
    clearTimeout(this.timer);
    if (this.oImg.width > 2048 || this.iChange++ > 20) { this.iChange = 0; return false; }
    this.SetPic(5);
    var oPicShow = this;
    this.timer = window.setTimeout(function(){ oPicShow.ZoomIn(); }, 10);
  },
  //
  ZoomOut: function(){
    clearTimeout(this.timer);
    if (this.oImg.width < 100 || this.iChange++ > 20) { this.iChange = 0; return false; }
    this.SetPic(-5);
    var oPicShow = this;
    this.timer = window.setTimeout(function(){ oPicShow.ZoomOut(); }, 10);
  },
  //
  Reset: function(){
    clearTimeout(this.timer);
    this.SetPic(this.iOriginal - this.oImg.width);
  },
  //
  MouseCtrl: function(e){
    clearTimeout(this.timer);
    var oEvent = Event(e), iZoom = 5 * oEvent.detail, iWidth = this.oImg.width - iZoom;
    oEvent.preventDefault();
    if (iWidth > 100 && iWidth < 2048) { this.SetPic(-iZoom); };
    return false;
  },
  //
  Default: function(){
    var iWidth = this.DefaultWidth;
    if ((iWidth / this.iIratio) > this.DefaultHeight) { iWidth = this.DefaultHeight * this.iIratio; }
    this.SetPic(iWidth - this.oImg.width);
  },
  //
  MouseDown: function(e){
    clearTimeout(this.timer);
    var oEvent = Event(e);
    this.iDiffX = oEvent.pageX; this.iDiffY = oEvent.pageY;
    this.isDrag = true;
  },
  MouseMove: function(e){
    if (!this.isDrag) return;
    var oEvent = Event(e);
    this.oDiv.scrollTop += this.iDiffY - oEvent.pageY;
    this.oDiv.scrollLeft += this.iDiffX - oEvent.pageX;
    this.iDiffX = oEvent.pageX; this.iDiffY = oEvent.pageY; 
  },
  MouseUp: function(){
    this.isDrag = false;
  }
};

修改删除举报引用回复