Question

以下是我的网页的一部分

使用jquery.touch.js旋转此div。

HTML

<div class="trans-circle" id="circleDiv">
                        <div class="border-circle">
                            <div class="large-circle">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><br/> Amirzai Sangin<br/>Minister of Communications<br/> Afghanisthan</p>

                            </div>
                            <div class="mini-circles1">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <br/><br/> John Campbell<br>President and CEO<br> Toranto Waterfront Revitalization Corportation</p>
                            </div>
                            <div class="mini-circles2">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> David Woolson<br/>President & CEO<br/> Walla Walla Chamber of Commerce</p>
                            </div>
                            <div class="mini-circles3">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> Lee Rainie<br/>Director<br/> Pew Research Center's Internet & American Life</p>
                            </div>
                            <div class="mini-circles4">
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/><br/> Suvi Linden<br/>Member<br/> UN Commission for Digital Development</p>
                            </div>
                        </div>
                    </div>

这是用

旋转这个div

$('#circleDiv').touch();

我没有使用捏合和拖动，只是旋转。

当我旋转它时，当小圆圈到达较大圆圈的位置时，我想让它变得更大，就像更大的圆圈一样，当它移出该区域时，它应该变成相同的大小。

他们都是div，没有别的。怎么做到这一点？有什么想法吗？

Answer 1

只是为了展示它，你可以使用css3解决方案

像这样的东西

-ms-transform: scale(1); /* IE 9 */
-webkit-transform: scale(2); /* Chrome, Safari, Opera */
transform: scale(1); /* Standard syntax */

创建一个具有此定义的类，并在需要时将其添加到div。

当div到达网页上的某个区域时缩放div

1 个答案: