ionic点击图片放大

最新推荐文章于 2020-11-17 18:37:36 发布

菠菜盼娣

最新推荐文章于 2020-11-17 18:37:36 发布

阅读量595

点赞数

分类专栏： ionic1 文章标签： ionic 图片放大

本文链接：https://blog.csdn.net/weixin_43806483/article/details/84553872

版权

ionic1 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

用户在进行拍照上传之后，查看图片不清楚，可以添加点击图片放大的功能。

<div class="col"  style="margin-top:5rem;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;"  
             src="img/picImg.png" ng-click="shouBigImage('img/picImg.png')">  
</div>  
<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>

相关js代码

  //点击图片放大  
$scope.shouBigImage = function (imageName) {  //传递一个参数（图片的URl）  
    $scope.Url = imageName;                   //$scope定义一个变量Url，这里会在大图出现后再次点击隐藏大图使用  
    $scope.bigImage = true;                   //显示大图  
};  
$scope.bigImage = false;    //初始默认大图是隐藏的  
$scope.hideBigImage = function () {  
    $scope.bigImage = false;  
};