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

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 を使用 Web ページの要素をズームするための jQuery プラグインです。Prezi のようなスライドショーを作成したり、画像やその他の詳細にズームするために使用できます。

于 2014-03-11T02:23:45.400 に答える