javascript 滚动和放大 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14480827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
scrolling and zooming in a div
提问by Captain Dando
I have a particular problem that I need help with.
我有一个特殊的问题需要帮助。
I have a div which contains a lot of other divs which I would like to be able to zoom into. for example, a few of the child divs have text and I'd like the user to be able to zoom in to see what they say.
我有一个 div，其中包含许多我希望能够放大的其他 div。例如，一些子 div 有文本，我希望用户能够放大以查看他们所说的内容。
here is an example -- > http://jsfiddle.net/du5ye/3/
这是一个例子-> http://jsfiddle.net/du5ye/3/
I've though that maybe I could use jquery to change the classes of everything inside, but I'd like to not hard code the new sizes, rather every property in the main wrapper div would get larger by a percentage as the user scrolls his mouse wheel. In addition, I'd like the user to be able to scroll around the div by dragging, quite like google maps. Is this kind of thing possible? and how would I go about it?
我虽然认为也许我可以使用 jquery 来更改内部所有内容的类，但我不想对新大小进行硬编码，而是当用户滚动时，主包装器 div 中的每个属性都会变大一个百分比鼠标滚轮。此外，我希望用户能够通过拖动来滚动 div，就像谷歌地图一样。这种事情可能吗？我该怎么做？
Here is the entire code for those that would rather avoid jsfiddle;
这是那些宁愿避免使用 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>
采纳答案by nairvijays
Try modifying this plugin to your needs - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect
尝试根据您的需要修改此插件 - http://www.htmldrive.net/items/demo/394/JQuery.iviewer-zoom-image-and-to-drag-effect
回答by Marcus Wallace
Use zoomooz.js It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details.
使用 zoomooz.js 是一个用于使网页元素缩放的 jQuery 插件。它可用于制作类似幻灯片的 Prezi 以及缩放图像或其他细节。
回答by Vitim.us
Have you tried the css zoomproperty? or maybe the css-transforms like scale()?
您是否尝试过 css缩放属性？或者也许是像scale()这样的 css 转换？
You can make your outer div overflow: scroll;and bind mouse down events to scroll the div for the pan and drag effect.
您可以制作外部 divoverflow: scroll;并绑定鼠标按下事件以滚动 div 以获得平移和拖动效果。
* I know this question is old, but It may help future visitors.
* 我知道这个问题很旧，但它可能对未来的访问者有所帮助。
