3

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

我有一个 div，其中包含许多我希望能够放大的其他 div。例如，一些子 div 有文本，我希望用户能够放大以查看他们所说的内容。

这是一个例子——> 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>
4

3 回答 3

3

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

您可以制作外部 divoverflow: scroll;并绑定鼠标按下事件以滚动 div 以获得平移和拖动效果。

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

于 2017-05-06T22:02:11.260 回答
2

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

于 2013-01-23T13:41:19.213 回答
1

使用 zoomooz.js 是一个用于使网页元素缩放的 jQuery 插件。它可用于制作 Prezi 之类的幻灯片以及缩放到图像或其他细节。

于 2014-03-11T02:23:45.400 回答