首 页  -  技术分享  - ionic图片大图显示
返    回

ionic图片大图显示

分享者：张香君     2015-12-08

  1. 在页面上显示了几张图片后，因为是手机端，图片会有点小的感觉，就想着怎么样才能让用户点击小图片看到大图呢，项目中ionic结合angularjs实现了这个功能

  2. 1.首先是三张小图上应添加一个函数，当点击图片时触发大图，代码如下：

    HTML：

    [html] view plaincopy
    1. <div class="row padding">  
    2.     <div class="col"  
    3.          style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">  
    4.         <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"  
    5.              ng-src="{{imgUrl+shop.Images[0]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[0]}}')">  
    6.     </div>  
    7.          
    8.     <div class="col"  
    9.          style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">  
    10.         <!--ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')"这里传的Url是从服务里调用的，可以传本地的-->  
    11.         <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"  
    12.              ng-src="{{imgUrl+shop.Images[1]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')">  
    13.     </div>  
    14.          
    15.     <div class="col"  
    16.          style="width: 100px;height: 100px;padding:3px;-webkit-box-shadow: 0 0 10px rgb(153,134,117);-moz-box-shadow:0 0 10px rgb(153,134,117);box-shadow:0 0 10px rgb(153,134,117);border-radius: 3px;margin: -1px 0 0 -1px;text-align: center">  
    17.         <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"  
    18.              ng-src="{{imgUrl+shop.Images[2]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[2]}}')">  
    19.     </div>  
    20. </div>  


    js:

    [javascript] view plaincopy
    1. //点击图片放大  
    2. $scope.shouBigImage = function (imageName) {  //传递一个参数（图片的URl）  
    3.     $scope.Url = imageName;                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用  
    4.     $scope.bigImage = true;                   //显示大图  
    5. };  


    2.定义一个div，用来显示大图的代码如下：

    HTML：

    [html] view plaincopy
    1. <div id="rightDisplay" ng-if="bigImage" class="popover-backdrop"  
    2.      style="position: fixed;top: 0;left: 0;z-index: 10; width: 100%;height: 100%;"  
    3.      ng-click="hideBigImage()">  
    4.     <img class="img-responsive"  
    5.          style="position: absolute;top: 10%;left: 50%;z-index: 10;display: block;margin-top: 18px;  
    6.          margin-left: -165px;height: 420px;width: 330px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);"  
    7.          src="{{Url}}"/>  
    8. </div>  
    [javascript] view plaincopy
    1.   
    在这里我用的是ng-if，而没有用ng-show,ng-hide,因为它们会先闪现一下再隐藏，背景颜色使用rgba非常方便，可以调节透明度

    js:

    [javascript] view plaincopy
    1. $scope.bigImage = false;    //初始默认大图是隐藏的  
    2. $scope.hideBigImage = function () {  
    3.     $scope.bigImage = false;  
    4. };  



    3.效果图如下：

    小图：

    小图：