Question

我是Phonegap的新手。我正在开发一个应用程序，用于显示来自网络的一些文本内容（有时是图像）。我想为应用添加缩放选项（仅适用于内容）。当我启用捏缩放时，它会缩放整个webview（包括动作/标题栏）。我想只缩放内容部分。我使用了IScroll，但无法工作。请帮帮我。

我在下面给出了我的代码。如果有任何问题，请告诉我。

    <!DOCTYPE html>
    <html ng-app="nakApp">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Daivadasakam</title>
    <meta name="description" content="">

    <link rel="stylesheet" href="assets/app.css"/>
    <script src="cordova.js"></script>
    <script src="cordova_plugins.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">




  </head>
  <body>
  <div ui-view></div>
  <!-- injector:js -->
  <script src="vendor/jquery.js"></script>
  <script src="vendor/angular.js"></script>
  <script src="vendor/angular-ui-router.js"></script>

  <script src="app/app.js"></script>
  <script src="app/controllers/home.js"></script>
  <script src="app/services/servive.js"></script>
  <script src="app/router.js"></script>
  <script src="app/filters/interpolate.js"></script>
  <script src="app/directives/directives.js"></script>
  <script src="app/controllers/language-selector.js"></script>
  <script src="app/config-generated.js"></script>

  <script src="app/controllers/data-content.js"></script>

  <!-- endinjector -->

  </body>
  </html>

www / app / templates上还有另一个文件。 data-content.html（假设它是数据显示的模板）。我给出了以下代码

<div class="continter">
    <div ng-include="" src="'app/templates/header.html'"></div>
    <div class="list-data-language">
        <div class="title">{{vModel.title}}</div>
        <div class="content" ng-bind-html="vModel.content"></div>
        <div ng-show="vModel.isAudio" class="list-item"  ng-click="vEvents.playAudio(vModel.audio_url)" >
            <label>Play Audio</label>
        </div>
        <div  ng-show="vModel.isVideo" class="list-item"  ng-click="vEvents.playAudio(vModel.video_url)" >
            <label>Play Video</label>
        </div>
    </div>
</div>

<div class="loader" ng-show='vModel.isLoaderOn'></div>

Answer 1

如果我理解正确的话，你想要的是一个 div ，当它应用缩放时，它的大小不会改变，对吧？

主要想法

您只需制作包含其他 div （ #content ）的固定大小 div （ #coniner ）它再次包含实际内容。容器的大小始终相同，只有内容div根据其内容更改大小。容器可以随意处理溢出，例如 auto （当内容太宽或内容时显示滚动条）或隐藏。

<div id="container">
    <div id="content">
       <!-- Content here -->
    </div>
</div>

然后在缩放时对内容应用CSS3 转换。例如，转换是在悬停内容时应用的，但对于您的情况，请参阅代码下方的注释。当悬停是基本上完成的缩放部分（缩放变换），在此示例中因子为2，然后将其移动（ translate 变换）从左上角开始角。

#container {
    width: 600px;
    height: 600px;
    top: 100px;
    left: 100px;
    position: absolute;
    overflow: auto; // Or hide or scroll or what you prefer
}

#content {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: gray;
}

#content:hover {
    transform: scale(2) translate(25%, 25%); 
}

示例

我让JSFiddle让你玩它。请注意，悬停效果仅用于示例更紧凑。我也不是一个CSS大师所以可能还有一些小问题。另外，为了实际使用该代码，请考虑添加 -webkit-transform ， -moz-transform ， -o-transform 和 - ms-transform 使其适用于所有可能的浏览器。

如何缩放

如何缩放（捏合或谷歌地图样式缩放按钮），它主要取决于你想要做什么。例如，如果您更喜欢捏手势，请查看this。在我的例子中，最容易用悬停显示。我认为您无论如何都需要使用JavaScript来进行缩放，因为您无法在CSS上设置缩放级别的多个值。

应用您的实际代码

如果您在原始问题中添加的代码是您的模板，则如果带有 list-data-language 类的div是您想要的那个zoomable ，您的代码看起来应该是这样的

<div class="continter"> <div ng-include="" src="'app/templates/header.html'"></div> <div id="container"> <div id="content" class="list-data-language"> <div class="title">{{vModel.title}}</div> <div class="content" ng-bind-html="vModel.content"></div> <div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" > <label>Play Audio</label> </div> <div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" > <label>Play Video</label> </div> </div> </div> </div> <div class="loader" ng-show='vModel.isLoaderOn'></div>

正如您所看到的，我添加了一个带有容器的 div ，并为 div 添加了内容 class list-data-language 。

在phonegap android中缩放内容（由angularjs注入）

1 个答案: