在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中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.效果图如下:

小图:

大图:




ionic中点击图片看大图的实现的更多相关文章

  1. WebView点击图片看大图效果

    在webViewDelegate里面添加如下代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 - (voi ...

  2. ios webview点击图片看大图效果及相应手势操作

    下面参考资料有比较详细的解释,在之前的就项目中也有比较好的效果(支持更多手势),可以参考下 参考资料

  3. 点击图片查看大图(纯js)

    $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...

  4. 关于kindeditor中点击图片后,滚动条往上顶的bug

    比如现在我插入两张图片, 无论我点击哪张图片,里边的滚动条都会往上顶. 本来以为往上会有解决方法,一查结果没有:然后想着去官网查查,然而什么都没有,想到官网提交这个bug,结果没地方提交. 怎么解决, ...

  5. jQuery插件——imgbox(点击图片查看大图)

    需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...

  6. [原创]WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  7. WKWebview点击图片查看大图

    大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...

  8. js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小

    方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...

  9. JQuery - 点击图片显示大图

    效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

随机推荐

  1. 蓝桥杯-骰子游戏-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  2. 数据库之Oracle(一)

    前段时间项目中需要做数据管理和迁移的工作,于是又重新拾起了数据库,在javaEE阶段,我们对于数据库的使用仅限于DML(insert,update,delete,select).数据库的使用也比较狭隘 ...

  3. Java Socket应用---通信是这样练成的

    网络基础简介 Java 中网络相关 API 的应用     Java 中的 InetAddress 的应用   Test01.java package com.imooc; import java.n ...

  4. C# Redis学习系列三:Redis配置主从

    Redis配置主从 主IP :端口      192.168.0.103 6666 从IP:端口       192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...

  5. 用Python设计一个经典小游戏

    这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...

  6. zoj1654 Place the Robots 二分图最大匹配

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 将每一行的包含空地的区域编号 再将每一列的包含空地的区域编号 然 ...

  7. 【SoDiaoEditor电子病历编辑器】阶段性更新啦

    转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...

  8. AngularJS操作DOM——angular.element

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容a ...

  9. Natas Wargame Level20 Writeup(会话状态注入/篡改)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArMAAACmCAYAAADJYwcaAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  10. bootstrap学习笔记之导航条基础

    导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...