采用背景图方式 >css ~~~ body,div{margin:0;padding:0;} #container{height:/*图片高度*/;overflow-x:auto;overflow-y:hidden;} .item{height:/*图片高度*/;width: /*图片宽度*/background:url("`背景图地址`") no-repeat left bottom;} ~~~ >html ~~~ <div id="container"><div class="item"></div></div> ~~~ >js ~~~ $(function () { // 鼠标状态 处理ie问题 var mouseStatus = 0; var ele = document.getElementById('container'); $(ele).css({ 'cursor': 'grab' }); var pos = { top: 0, left: 0, x: 0, y: 0 }; var mouseDownHandler = function mouseDownHandler(e) { mouseStatus = 1; $(ele).css({ 'cursor': 'grabbing', 'user-select': 'none' }); pos = { left: ele.scrollLeft, top: ele.scrollTop, x: e.clientX, y: e.clientY }; if (ele.addEventListener) { document.addEventListener('mousemove', mouseMoveHandler); document.addEventListener('mouseup', mouseUpHandler); } else { document.attachEvent('onmousemove', mouseMoveHandler); document.attachEvent('onmouseup', mouseUpHandler); } }; var mouseMoveHandler = function mouseMoveHandler(e) { var dx = e.clientX - pos.x; var dy = e.clientY - pos.y; if (mouseStatus == 1) { ele.scrollTop = pos.top - dy; ele.scrollLeft = pos.left - dx; } }; var mouseUpHandler = function mouseUpHandler() { $(ele).css({ 'cursor': 'grab' }); $(ele).removeAttr('user-select'); if (ele.removeEventListener) { document.removeEventListener('mousemove', mouseMoveHandler); document.removeEventListener('mouseup', mouseUpHandler); mouseStatus = -1; } else { ele.detachEvent('onmousemove', mouseMoveHandler); ele.detachEvent('onmouseup', mouseUpHandler); mouseStatus = -1; } }; if (ele.addEventListener) { ele.addEventListener('mousedown', mouseDownHandler); } else { ele.attachEvent('onmousedown', mouseDownHandler); } }); ~~~