怎么实现DIV容器？？

to chinmo:
就是这样的效果

<div id=a style="width:640px;height:480px;overflow:hidden;background:CCC">
<div id=b style="width:2000px;height:2000px;background:#EEE"></div>
</div>
设置这样就可以了，拖动的代码自己搜索一下.

好象是google earth的地图效果，没做过你这样实验一下看看是否可行。
1.把图片做div背景,用css设置背景位置
2.当拖拽的时候，计算并改变背景图片的位置。
这个方法应该是可以的，但我对css设置背景图片位置不懂，所以不知道
难度有多大，希望对你有所帮助

<html>
    <head>
        <title>Ajaxian Maps</title>
        <style type="text/css">
            h1 {
                font: 20pt sans-serif;
            }
            #outerDiv {
                height: 600px;
                width: 800px;
                border: 1px solid black;
                position: relative;
                overflow: hidden;
            }            #innerDiv {
                position: relative;
                left: 0px;
                top: 0px;
            }
        </style>
        <script type="text/javascript">
            // constants
            var viewportWidth = 800;
            var viewportHeight = 600;
            var tileSize = 100;            // used to control moving the map div
            var dragging = false;
            var top;
            var left;
            var dragStartTop;
            var dragStartLeft;            function init() {
                // make inner div big enough to display the map
                setInnerDivSize('2000px', '1400px');                // wire up the mouse listeners to do dragging
                var outerDiv = document.getElementById("outerDiv");
                outerDiv.onmousedown = startMove;
                outerDiv.onmousemove = processMove;
                outerDiv.onmouseup = stopMove;                // necessary to enable dragging on IE
                outerDiv.ondragstart = function() { return false; }                checkTiles();
            }            function startMove(event) {
                // necessary for IE
                if (!event) event = window.event;                dragStartLeft = event.clientX;
                dragStartTop = event.clientY;
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "-moz-grab";                top = stripPx(innerDiv.style.top);
                left = stripPx(innerDiv.style.left);                dragging = true;
                return false;
            }            function processMove(event) {
                if (!event) event = window.event;  // for IE
                var innerDiv = document.getElementById("innerDiv");
                if (dragging) {
                    innerDiv.style.top = top + (event.clientY - dragStartTop);
                    innerDiv.style.left = left + (event.clientX - dragStartLeft);
                }                checkTiles();
            }
            // START:checktiles
            function checkTiles() {
                // check which tiles should be visible in the inner div
                var visibleTiles = getVisibleTiles();                // add each tile to the inner div, checking first to see
                // if it has already been added
                var innerDiv = document.getElementById("innerDiv");
                var visibleTilesMap = {};      //<label id="empty.map"/>
                for (i = 0; i < visibleTiles.length; i++) {  //<label id="iterate.visible.tiles"/>
                    var tileArray = visibleTiles[i];
                    var tileName = "x" + tileArray[0] + "y" + tileArray[1] + "z0";
                    visibleTilesMap[tileName] = true;
                    var img = document.getElementById(tileName); //<label id="id.attribute"/>
                    if (!img) { //<label id="id.attribute.3"/>
                        img = document.createElement("img");  //<label id="create.img"/>
                        img.src = "resources/tiles/" + tileName + ".jpg";  //<label id="tile.url"/>
                        img.style.position = "absolute";
                        img.style.left = (tileArray[0] * tileSize) + "px";
                        img.style.top = (tileArray[1] * tileSize) + "px";
                        img.setAttribute("id", tileName); //<label id="id.attribute.2"/>
                        innerDiv.appendChild(img);         //<label id="add.img"/>
                    }
                }
            }
            // END:checktiles            function getVisibleTiles() {
                var innerDiv = document.getElementById("innerDiv");                var mapX = stripPx(innerDiv.style.left);
                var mapY = stripPx(innerDiv.style.top);                var startX = Math.abs(Math.floor(mapX / tileSize)) - 1;
                var startY = Math.abs(Math.floor(mapY / tileSize)) - 1;                var tilesX = Math.ceil(viewportWidth / tileSize) + 1;
                var tilesY = Math.ceil(viewportHeight / tileSize) + 1;                var visibleTileArray = [];
                var counter = 0;
                for (x = startX; x < (tilesX + startX); x++) {
                    for (y = startY; y < (tilesY + startY); y++) {
                        visibleTileArray[counter++] = [x, y];
                    }
                }
                return visibleTileArray;
            }
            function stopMove() {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.cursor = "";
                dragging = false;
            }
            function stripPx(value) {
                if (value == "") return 0;
                return parseFloat(value.substring(0, value.length - 2));
            }            function setInnerDivSize(width, height) {
                var innerDiv = document.getElementById("innerDiv");
                innerDiv.style.width = width;
                innerDiv.style.height = height;
            }
        </script>
        <body onload="init()">
        <p>
            <h1>Ajaxian Maps</h1>
        </p>
        <div id="outerDiv">
            <div id="innerDiv">

            </div>
        </div>
    </body>
    </head>
</html>

to changke18 :
我刚结贴你就发了，确实没看到
今天不能加分了，明天我一定给你追加分，谢谢。

调试易

怎么实现DIV容器？？

解决方案 »