Question

我有一个特别的问题，我需要帮助。

我有一个包含很多其他div的div，我希望能够放大。例如，一些儿童div有文字，我希望用户能够放大以查看他们的内容。

这是一个例子 - ＆gt; http://jsfiddle.net/du5ye/3/

我可能也许我可以使用jquery来改变里面所有内容的类，但是我不想硬编码新的大小，而主包装div中的每个属性都会变大一个百分比作为用户滚动他的鼠标滚轮。此外，我希望用户能够通过拖动滚动div，就像谷歌地图一样。这种事可能吗？我该怎么办呢？

以下是那些宁愿避免使用jsfiddle的代码;

<!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>Untitled Document</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<style>
.layoutGreys {
    background-color: #DDD;
    border: solid thin #BBB;

    padding-left: 10px;
    padding-right: 10px;;

    float: left;
}

.Group{
    background-color: #955;
    width: 50px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
}
.Divider{
    width: 10px;
    height: 35px;
    float: left;
    <!--border-top: medium solid #999;-->
    margin-top: 10px;
}

.wrapper{
    width: 560px;
    height: 175px;
    background-color: #333; 
    border: thick #888 solid;
}

</style>
<body onload="CreateBox()">
    <div id="wrapper" class="wrapper">
        <div class="layoutGreys">
            <div class="Group"></div>
            <!-- Parent -->
            <div class="layoutGreys">
                <!-- Parent Icon -->
                <div class="Group" style="float: none;"></div>
                        <!-- Children -->
                        <div class="layoutGreys">
                            <div class="Group"></div>
                            <div class="Divider"></div>
                            <div class="Group"></div>
                            <div class="Divider"></div>
                            <!-- Parent -->
                            <div class="layoutGreys">
                                <!-- Parent Icon -->
                                <div class="Group" style="float: none; "></div>
                                    <!-- Children -->
                                    <div class="layoutGreys">
                                        <div class="Group"></div>
                                        <div class="Divider"></div>
                                        <div class="Group"></div>
                                        <div class="Divider"></div>
                                        <div class="Group"></div>
                                    </div>
                            </div>
                            <div class="Divider"></div>
                            <div class="Group"></div>
                        </div>
            </div>
            <div class="Group"></div>   
        </div>
    </div>
</body>
</html>

Answer 1

尝试根据您的需要修改此插件 - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect

Answer 2

使用zoomooz.js 它是一个jQuery插件，用于缩放网页元素。它可用于制作Prezi，如幻灯片和缩放图像或其他细节。

Answer 3

您是否尝试过css zoom属性？或者像scale()这样的css变换？

您可以创建外部div overflow: scroll;并绑定鼠标按下事件以滚动div以进行平移和拖动效果。

*我知道这个问题很老，但它可能会对未来的访客有所帮助。

滚动和缩放div

3 个答案: