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.效果图如下:

小图:


大图:


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页