Question

问题陈述：

我想要一个屏幕空间，在div中有背景图像，在背景图像上有另一个图像。背景图像上方的图像应该是可拖动和可调整大小的，当我添加它时，它应自动调整为背景图像的百分比缩放。此外，背景和其他图像应按比例放大和缩小。

请帮助！

我的方法：

有两个div。一个div有一个作为其背景的图像。第二个div有另一个可拖动的图像。

我无法同步这两个div，以便它们可以按比例放大和缩小。

谢谢你提前:)）

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery.iviewer test</title>
        <link href="jquery.iviewer.css"  rel="stylesheet" type="text/css" /ss>
        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jqueryui.js" ></script>
        <script type="text/javascript" src="jquery.mousewheel.min.js" ></script>
        <script type="text/javascript" src="jquery.iviewer.js" ></script>
        <script type="text/javascript">
            var $ = jQuery;
            $(document).ready(function(){
                  var iv1 = $("#viewer").iviewer({
                       src: "meditation.png", 
                       update_on_resize: true,
                       zoom_animation: true,
                       mousewheel: true,
                       onMouseMove: function(ev, coords) { },
                       onStartDrag: function(ev, coords) { return false; }, //this image can be dragged
                       onDrag: function(ev, coords) { }
                  });

                   $("#in").click(function(){ iv1.iviewer('zoom_by', 1); }); 
                   $("#out").click(function(){ iv1.iviewer('zoom_by', -1); }); 
                   $("#fit").click(function(){ iv1.iviewer('fit'); }); 
                   $("#orig").click(function(){ iv1.iviewer('set_zoom', 100); }); 
                   $("#update").click(function(){ iv1.iviewer('update_container_info'); });
            });
        </script>


        <link rel="stylesheet" type="text/css" href="common/common.css"/>

        <script language="JavaScript" type="text/javascript" src="core.js"></script>
        <script language="JavaScript" type="text/javascript" src="events.js"></script>
        <script language="JavaScript" type="text/javascript" src="css.js"></script>
        <script language="JavaScript" type="text/javascript" src="coordinates.js"></script>
        <script language="JavaScript" type="text/javascript" src="drag.js"></script>

        <script language="JavaScript"><!--
        window.onload = function() {
        var group
        var coordinates = ToolMan.coordinates()
        var drag = ToolMan.drag()

        var boxDrag = document.getElementById("boxDrag")
        drag.createSimpleGroup(boxDrag)

        var boxVerticalOnly = document.getElementById("boxVerticalOnly")
        group = drag.createSimpleGroup(boxVerticalOnly)
        group.verticalOnly()

        var boxHorizontalOnly = document.getElementById("boxHorizontalOnly")
        group = drag.createSimpleGroup(boxHorizontalOnly)
        group.horizontalOnly()

        var boxRegionConstraint = document.getElementById("boxRegionConstraint")
        group = drag.createSimpleGroup(boxRegionConstraint)
        var origin = coordinates.create(0, 0)
        group.addTransform(function(coordinate, dragEvent) {
        var originalTopLeftOffset = 
                dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
        return coordinate.constrainTo(origin, originalTopLeftOffset)

            })

        var boxThreshold = document.getElementById("boxThreshold")
        group = drag.createSimpleGroup(boxThreshold)
        group.setThreshold(25)

        var boxHandle = document.getElementById("boxHandle")
        group = drag.createSimpleGroup(boxHandle, document.getElementById("handle"))

        var boxAbsolute = document.getElementById("boxAbsolute")
        group = drag.createSimpleGroup(boxAbsolute)
        group.verticalOnly()
        group.addTransform(function(coordinate, dragEvent) {
            var scrollOffset = coordinates.scrollOffset()
            if (coordinate.y < scrollOffset.y)
                return coordinates.create(coordinate.x, scrollOffset.y)

            var clientHeight = coordinates.clientSize().y
            var boxHeight = coordinates._size(boxAbsolute).y
            if ((coordinate.y + boxHeight) > (scrollOffset.y + clientHeight))
                return coordinates.create(coordinate.x, 
                        (scrollOffset.y + clientHeight) - boxHeight)

            return coordinate
            })
        }
        </script>

        <link rel="stylesheet" href="/jquery.iviewer.css" />

        <style>
            .viewer
            {
                width: 75%;
                height: 800px;
                border: 1px solid black;
                position: relative;
                overflow:scroll;
            }

            .wrapper
            {
                overflow: hidden;
            }

            div {
                margin: 0px;
                padding: 0px;
            }
            .verticalgridline {
                padding-top: 27px;
            }
            .box {
                float: left;
                padding: 0px;
            }

            #boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint, 
            #boxThreshold, #boxAbsolute {
                cursor: move;
            }
            #boxAbsolute {
                position: absolute;
                bottom: 0px;
                right: 0px;
            }
        </style>

    </head>

    <body>
        <h1>Design Page</h1>
        <!-- wrapper div is needed for opera because it shows scroll bars for reason -->
        <div class="wrapper">
            <div id="viewer" class="viewer" >
                <div id="boxDrag" class="box">
                    <img src="4.png" />
                </div>
            </div>
        </div>

    </body>
</html>

同步两个div以调整大小

0 个答案: