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.效果图如下:
小图:
大图:
ionic中点击图片看大图的实现的更多相关文章
- 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 ...
- ios webview点击图片看大图效果及相应手势操作
下面参考资料有比较详细的解释,在之前的就项目中也有比较好的效果(支持更多手势),可以参考下 参考资料
- 点击图片查看大图(纯js)
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- 关于kindeditor中点击图片后,滚动条往上顶的bug
比如现在我插入两张图片, 无论我点击哪张图片,里边的滚动条都会往上顶. 本来以为往上会有解决方法,一查结果没有:然后想着去官网查查,然而什么都没有,想到官网提交这个bug,结果没地方提交. 怎么解决, ...
- jQuery插件——imgbox(点击图片查看大图)
需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...
- JQuery - 点击图片显示大图
效果: 目录结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
随机推荐
- 蓝桥杯-骰子游戏-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 数据库之Oracle(一)
前段时间项目中需要做数据管理和迁移的工作,于是又重新拾起了数据库,在javaEE阶段,我们对于数据库的使用仅限于DML(insert,update,delete,select).数据库的使用也比较狭隘 ...
- Java Socket应用---通信是这样练成的
网络基础简介 Java 中网络相关 API 的应用 Java 中的 InetAddress 的应用 Test01.java package com.imooc; import java.n ...
- C# Redis学习系列三:Redis配置主从
Redis配置主从 主IP :端口 192.168.0.103 6666 从IP:端口 192.168.0.108 3333 配置从库 (1)安装服务: redis-server ...
- 用Python设计一个经典小游戏
这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...
- zoj1654 Place the Robots 二分图最大匹配
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=654 将每一行的包含空地的区域编号 再将每一列的包含空地的区域编号 然 ...
- 【SoDiaoEditor电子病历编辑器】阶段性更新啦
转眼距离上一次v2正式发布已经过去一个半月了.github期间不定期push了二十几次,同时感谢分布在广州.福建.上海.北京的一众小伙伴,正是你们给出的建议,才让SoDiaoEditor不断完善. 我 ...
- AngularJS操作DOM——angular.element
addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容a ...
- Natas Wargame Level20 Writeup(会话状态注入/篡改)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArMAAACmCAYAAADJYwcaAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF
- bootstrap学习笔记之导航条基础
导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背 ...