1. <html> 
    2.  
         
  2. <head> 
    3.  
         
  3.     <title>图片拖动</title> 
    4.  
         
  4.     <style type="text/css"> 
    5.  
         
  5.         /*overflow设为hidden，就不会有滚动条显示，但是滚动条仍然存在， 
    6.  
         
  6.           通过scrollTop和scrollLeft操作滚动条 
    7.  
         
  7.         */ 
    8.  
         
  8.         #wrap{width:500px; height:500px; overflow:hidden; border:1px solid red; margin:50px 300px;} 
    9.  
         
  9.         #wrap div.inside{background-p_w_picpath:url(p_w_picpaths/java.jpg); 
    10.  
         
  10.                          background-repeat:no-reapt; 
    11.  
         
  11.                          width:1000px;height:1000px; 
    12.  
         
  12.                          cursor:pointer; 
    13.  
         
  13.                         } 
    14.  
         
  14.     </style> 
    15.  
         
  15. </head> 
    16.  
         
  16. <body> 
    17.  
         
  17.     <div id = "wrap"> 
    18.  
         
  18.         <div class="inside"></div> 
    19.  
         
  19.     </div> 
    20.  
         
  20.      
    21.  
         
  21.     <script type="text/javascript"> 
    22.  
         
  22.         //获取外层div的对象 
    23.  
         
  23.         var wrap = document.getElementById("wrap"); 
    24.  
         
  24.         //给外层div添加事件 
    25.  
         
  25.         wrap.onmousedown = mouseDown; 
    26.  
         
  26.         wrapwrap.onmouseout = wrap.onmouseup = mouseUp; 
    27.  
         
  27.         wrap.onmousemove = mouseMove; 
    28.  
         
  28.          
    29.  
         
  29.         //json法创建一个对象 
    30.  
         
  30.         //x,y保存鼠标的坐标，buttonDown记录鼠标按下的状态(初始值为0和未按下) 
    31.  
         
  31.         var point = {x:0, y:0, buttonDown:false}; 
    32.  
         
  32.  
    33.  
         
  33.         function mouseDown(e){ 
    34.  
         
  34.             //获得事件参数对象 
    35.  
         
  35.             ee = e || window.event; 
    36.  
         
  36.             //e.offsetX获取鼠标指针相对于事件源元素的的位置 
    37.  
         
  37.             point.x = e.offsetX; 
    38.  
         
  38.             point.y = e.offsetY; 
    39.  
         
  39.             //一旦调用表示已经按下，变为true 
    40.  
         
  40.             point.buttonDown = true; 
    41.  
         
  41.         } 
    42.  
         
  42.          
    43.  
         
  43.         function mouseUp(){ 
    44.  
         
  44.             point.buttonDown = false;    
    45.  
         
  45.         } 
    46.  
         
  46.          
    47.  
         
  47.         function mouseMove(e){ 
    48.  
         
  48.             //获得事件参数对象 
    49.  
         
  49.             ee = e || window.event; 
    50.  
         
  50.             //鼠标移动并且按下 
    51.  
         
  51.             if(point.buttonDown){ 
    52.  
         
  52.                 //外层div通过加有滚动条而查看内层较大的div内容，所以scrollLeft是外层div的属性 
    53.  
         
  53.                 wrap.scrollLeft += point.x - e.offsetX; 
    54.  
         
  54.                 wrap.scrollTop += point.y - e.offsetY; 
    55.  
         
  55.             } 
    56.  
         
  56.         } 
    57.  
         
  57.     </script> 
    58.  
         
  58. </body> 
    59.  
         
  59. </html> 
    60.