ionic中點擊圖片看大圖的實現

在頁面上顯示了幾張圖片后，因為是手機端，圖片會有點小的感覺，就想着怎么樣才能讓用戶點擊小圖片看到大圖呢，項目中ionic結合angularjs實現了這個功能

1.首先是三張小圖上應添加一個函數，當點擊圖片時觸發大圖，代碼如下：

HTML：

<div class="row padding">
    <div class="col"
         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">
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[0]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[0]}}')">
    </div>
       
    <div class="col"
         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">
        <!--ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')"這里傳的Url是從服務里調用的，可以傳本地的-->
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[1]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[1]}}')">
    </div>
       
    <div class="col"
         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">
        <img class="img-responsive" style="height: 100%; border:1px solid #ffffff;"
             ng-src="{{imgUrl+shop.Images[2]}}" ng-click="shouBigImage('{{imgUrl+shop.Images[2]}}')">
    </div>
</div>

　　

js:

//點擊圖片放大
$scope.shouBigImage = function (imageName) {  //傳遞一個參數（圖片的URl）
    $scope.Url = imageName;                   //$scope定義一個變量Url，這里會在大圖出現后再次點擊隱藏大圖使用
    $scope.bigImage = true;                   //顯示大圖
};

　　

2.定義一個div，用來顯示大圖的代碼如下：

HTML：

<div id="rightDisplay" ng-if="bigImage" class="popover-backdrop"
     style="position: fixed;top: 0;left: 0;z-index: 10; width: 100%;height: 100%;"
     ng-click="hideBigImage()">
    <img class="img-responsive"
         style="position: absolute;top: 10%;left: 50%;z-index: 10;display: block;margin-top: 18px;
         margin-left: -165px;height: 420px;width: 330px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);"
         src="{{Url}}"/>
</div>

在這里我用的是ng-if，而沒有用ng-show,ng-hide,因為它們會先閃現一下再隱藏，背景顏色使用rgba非常方便，可以調節透明度

js:

$scope.bigImage = false;    //初始默認大圖是隱藏的
$scope.hideBigImage = function () {
    $scope.bigImage = false;
};

　　

3.效果圖如下：

小圖：

大圖：