logo标签列表

在div内滚动和缩放

javascriptjqueryhtmlcss
3

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

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

这里有一个示例 -- > http://jsfiddle.net/du5ye/3/

我想也许可以使用 jQuery 更改内部所有元素的类，但我不想硬编码新的大小，而是希望主包装 div 中的每个属性在用户滚动鼠标滚轮时按比例变大。此外，我希望用户能够通过拖动来滚动 div，就像 Google 地图一样。这种事情可能吗？我该如何做到这一点？

对于那些想避免 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>
3个回答
3

你尝试过使用CSS的zoom属性吗？或者像scale()这样的CSS变换？

你可以将外部div设置为overflow: scroll;，并绑定鼠标按下事件以滚动div以实现平移和拖拽效果。

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

仍建议不要在生产中使用。https://developer.mozilla.org/zh-CN/docs/Web/CSS/zoom - Ebi
2
是的。但是您可以修改插件脚本，在缩放内容时增加字体大小百分比！ - nairvijays
问题在于它的“src”属性，这是它获取图片的位置。例如 'src：“test_active_with_objects.GIF”' 它接受文件，而不是代码。 - Captain Dando
实际上，您可以使用多个插件来实现它。这里是我使用mousewheel插件创建的示例fiddle - http://jsfiddle.net/SHAPE/1/。同样的方式，您可以向容器添加属性overflow:hidden以隐藏滚动条，并使用不同的插件拖动内容。诀窍是以em为单位给出子内容的尺寸。 - nairvijays
1
你可以使用像 http://the-taylors.org/jquery.kinetic/ 这样的插件，在缩放后拖动内容。 - nairvijays
1

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接