如何实现在IE内一张尺寸超过IE窗口的图片，鼠标在图上可以拖动图片查看，相当于IE滚动条功能。

如何实现在IE内一张尺寸超过IE窗口的图片，鼠标在图上可以拖动图片查看，相当于IE滚动条功能。

解决方案 »

  1.   

    在主页面上包含一个<iframe src="imghtml.html">imghtml.html中
    <img scr="test.jpg" width ='2000' heigth='3000'
    即可
      

  2.   

    是不是这样的?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    html, body{
    margin:0px; padding:0px;
    }
    #container{
    overflow:hidden; position:relative;
    }
    #img {
    display:none; position:absolute; cursor:move;
    }
    </style>
    <script type="text/javascript">
    function $(id){
    return document.getElementById(id);
    }
    window.onload = function(){
    var con = $("container"), img = $("img"), x, y , isMove = false;
    var width = document.body.clientWidth || document.documentElement.clientWidth,
    height = document.body.clientHeight || document.documentElement.clientHeight;

    con.style.width = width+ "px";
    con.style.height = height + "px";
    img.style.display = "block";
    img.style.left = "0px";
    img.style.top = "0px";

    img.onmousedown = function(oEvent){
    isMove = true;
    oEvent = oEvent || window.event;
    document.all && img.setCapture();
    x = oEvent.clientX;
    y = oEvent.clientY;
    };
    img.onmousemove = function(oEvent){
    if(!isMove) return;
    oEvent = oEvent || window.event;
    var mx = parseInt(img.style.left) + oEvent.clientX - x;
    var my = parseInt(img.style.top) + oEvent.clientY - y;

    mx = Math.max(Math.min(0, mx), width - img.width);
    my = Math.max(Math.min(0, my), height - img.height);
    img.style.left = mx + "px";
    img.style.top = my + "px";
    x = oEvent.clientX;
    y = oEvent.clientY;
    document.title = mx + " " + my;
    };
    img.onmouseup = function(){
    isMove = false;
    document.all && img.releaseCapture();
    };
    };
    </script>
    </head>
    <body>
    <div id="container">
    <img id="img" src="http://travel.dahangzhou.com/fengjing/347/pics/20071025164439994.jpg" />
    </div>
    </body>
    </html>
      

  3.   

    document.all && img.setCapture();
    这句中的document.all &&是做什么用的?
      

  4.   

     img.onmousedown = function(oEvent){
    这里为什么还会有个oEvent?
    看MSDN上面似乎没有这个参数,而且貌似也是多余的。
    莫非是兼容其他浏览器用的?
      

  5.   

    啊.有点问题.Firefox下一片空白
      

  6.   

    终于想出来了。
    麻辣隔壁的，原来document.all && img.setCapture();也是兼容浏览器的。
    查了查setCapture,原来是IE Only,在js中&&前面的条件为false的话是不会执行后面的条件语句的,例如:
    alert(true && alert(1)  );
    把true换成false后就只执行一次alert(false);而在true下时会弹出两次。狗日的浏览器，狗日的W3C.
    祝Microsoft千秋万载,一统糨糊!