var showBigImage = new iScroll('showBigImage', {
snap: 'div',
snapThreshold: 480,
momentum: false,
zoom : true,
zoomMin : 1.0,
zoomMax : 1.0,
hScrollbar : false,
vScrollbar : false,
doubleTapZoom: 1,
checkDOMChanges : true,
onScrollEnd: function () {
var $lazyImgs = $('#showBigImage .scroller span img'),
len = $lazyImgs.length,
i = 0,
step = this.currPageX,
that = this,
startX,
startY; for (; i < len; i++) {
if (parseInt($lazyImgs.eq(i).offset().left) === 0) {
$lazyImgs.eq(i).attr('src', $lazyImgs.eq(i).attr('lazysrc'));
};
}; $(".bigImgNavBar ul li").removeClass("active");
$(".bigImgNavBar ul li").eq(step).addClass("active"); $('#showBigImage .scroller span img').each(function (k,v) {
var $this = $(v); $this.bind('touchstart', function (event) {
startX = event.originalEvent.touches[0].pageX;
startY = event.originalEvent.touches[0].pageY;
});
$this.bind('touchmove', function (event) {
var moveX = event.originalEvent.touches[0].pageX,
moveY = event.originalEvent.touches[0].pageY; if (Math.abs(startX - moveX) > 480) {
if (parseInt($this.width()) !== 500) {
$this.css({'width': '500px', 'height': '500px', 'z-index': 1, 'left': '0px', 'top': '0px'});
}
};
});
$this.bind('touchend', function (event) {
event.preventDefault();
});
});
},
onZoomEnd: function (event) {
var $this = $(event.target),
targetImgW = parseInt($this.width()),
targetImgH = parseInt($this.height()); if (event.target.tagName.toLowerCase() !== 'img') return; console.log($this.offset().left,$this.get(0))
if (targetImgW !== 500 ) {
$this.css({'width': targetImgW/2 + 'px', 'height': targetImgH/2 + 'px', 'z-index': 1, 'left': '0px', 'top': '0px'});
} else {
$this.css({'width': targetImgW*2 + 'px', 'height': targetImgH*2 + 'px', 'z-index': 2, 'top': '-70px', 'left': -targetImgW/2 + 'px'});
};
}
});
<div id="showBigImage" style="overflow: hidden; z-index: 99999; background-color: white; position: fixed; top: 0px; left: 0px; bottom: 0px; width: 100%;">
<div class="scroller" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) scale(1) translateZ(0px); width: 7680px; height: 100%;"><span style="display:table-cell;vertical-align:middle;width:100%;height:100%;overflow:hidden;"><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img src="http://pic.secoo.com/product/500/500/94/53/10249453_1.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic.secoo.com/product/500/500/94/53/10249453_2.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/468befa3d8e04ebaaeded763471e44e8.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/50060046684c44a08e81b56e9a7af741.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/1bbb3bc472834e1fa68b19ea7becc0c9.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/fc1d3f61d1314a0faf8aea168cb49f62.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/11a31d2967e64aa7bd8387839da221d0.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/4679351842e84b3097934688d323656b.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/19b7569ab5a04cc0b2b4c589161d5c97.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/112d32a189034fe18d1b65914bf94491.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/a08467b6d5914197b7fe7dbf5e46286c.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/7efa6dbd51d64424a2b9e8631022936a.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div></span></div>
<div class="bigImgNavBar">
<ul><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
</div>

iScrolljs 模拟android相册的更多相关文章

  1. Unity3d截图保存到Android相册的实现

    Unity3d截图保存到Android相册的实现-----------------------------ultrasoon 季风原创--------------------------------- ...

  2. python模拟android屏幕高频点击工具

    一.环境 windows 10  + python3.6 二.需求 1.模拟android设备高频点击事件: 2.模拟规定次数的点击事件或模拟规定时间内的点击事件: 三.code 1.模拟规定时间内的 ...

  3. Unity调用Android相册

    最近有一个项目有这个需求,让用户上传自己的交易凭证的截图,之前因为对调Android原生的东西不太熟悉,就先放了一边 因为项目已经上线,只不过是该功能未开放而已,那么现在为什么要写这篇博客呢,是因为. ...

  4. Qt for Android (三) 打开Android相册并选一个图片进行显示

    Qt for Android (三) 这两天弄了一下android相册的相关功能.还是花了挺长时间的,这里总结一下,避免以后再踩坑.同时也在这篇文章里面补齐一些android开发的基础支持 打开And ...

  5. RaidoGroup+RadioButton模拟android下拉框弹出List

    引用 <上面的Hello world!是居左的,但是下面的文字却怎么都不能靠边.试了各种方法都不行.最后,无意中给RadioButton添加一个backgroud属性即可:<RadioBu ...

  6. Oracle VirtualBox 模拟Android系统 素材

    Android to x86 下载地址: http://www.android-x86.org/download VirtualBox 下载地址: https://www.virtualbox.org ...

  7. [模拟Android微信]主界面

    首先看很像模仿: 走出来: 实现过程: 依赖类库:actionbarsherlock 用actionbarsherlock来实现顶部的搜索的效果. tab用的是Viewpaper实现的. 详细细节: ...

  8. Android单元测试与模拟测试详解

    测试与基本规范 为什么需要测试? 为了稳定性,能够明确的了解是否正确的完成开发. 更加易于维护,能够在修改代码后保证功能不被破坏. 集成一些工具,规范开发规范,使得代码更加稳定( 如通过 phabri ...

  9. Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

      分类: Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报 android相册layoutobjectclassloade ...

随机推荐

  1. Netsharp介绍

    1.1     Netsharp是什么 Netsharp定义: Netsharp业务基础平台 = 1.系统框架 + 2.元数据 + 3.平台工具 + 4.基础业务 + 5.二次开发 此五个概念请参考什 ...

  2. BZOJ 4500: 矩阵 差分约束

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=4500 题解: 从行向列建边,代表一个格子a[i][j],对每个顶点的所有操作可以合并在一 ...

  3. SqlServer 全局变量

    1.@@ERROR 返与@@ERROR 近语句错误码局限于DML语句select语句执行现错误则返等于0错误码没错则返0通使用判断语句没执行功 -- Create Schema if not one ...

  4. netty 粘包问题处理

    netty 粘包问题处理 key words: netty 粘包 解包 半包 TCP 一般TCP粘包/拆包解决办法 定长消息,例如每个报文长度固定,不够补空格 使用回车换行符分割,在包尾加上分割符,例 ...

  5. poj 1113 Wall

    题目链接:http://poj.org/problem?id=1113 题目大意:给出点集和一个长度L,要求用最短长度的围墙把所有点集围住,并且围墙每一处距离所有点的距离最少为L,求围墙的长度. 解法 ...

  6. 【BZOJ】【1406】【AHOI2007】密码箱

    数论 Orz iwtwiioi 果然数论很捉鸡>_>完全不知道怎么下手 $$x^2 \equiv 1 \pmod n \rightarrow (x+1)*(x-1)=k*n $$ 所以,我 ...

  7. navigationController.navigationBar.titleTextAttributes

    navigationController.navigationBar.titleTextAttributes = [NSDictionary dictionaryWithObject:[UIColor ...

  8. shiro添加注解@RequiresPermissions不起作用

    这是因为没有开启spring拦截器,在spring-mvc.xml中加入以下代码就可以了(一定要写在最先加载的xml中,写在后面加载的xml中也不起作用) <bean class="o ...

  9. 如何创建和发布.asmx Web Service

    创建和发布Web ServiceWeb服务方法中可以返回一个DataSet对象 WEB服务可以说是下一代WEB应用程序的基础,无论客户端是WINDOWS应用.ASP.NET Web Form程序.甚至 ...

  10. Mac下使用Apache TCPMon

    Mac下使用Apache TCPMon 参考链接: TCPMon Tutorial Anyone know how to get TCPMON working on a mac? Apache TCP ...