iScrolljs 模拟android相册
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相册的更多相关文章
- Unity3d截图保存到Android相册的实现
Unity3d截图保存到Android相册的实现-----------------------------ultrasoon 季风原创--------------------------------- ...
- python模拟android屏幕高频点击工具
一.环境 windows 10 + python3.6 二.需求 1.模拟android设备高频点击事件: 2.模拟规定次数的点击事件或模拟规定时间内的点击事件: 三.code 1.模拟规定时间内的 ...
- Unity调用Android相册
最近有一个项目有这个需求,让用户上传自己的交易凭证的截图,之前因为对调Android原生的东西不太熟悉,就先放了一边 因为项目已经上线,只不过是该功能未开放而已,那么现在为什么要写这篇博客呢,是因为. ...
- Qt for Android (三) 打开Android相册并选一个图片进行显示
Qt for Android (三) 这两天弄了一下android相册的相关功能.还是花了挺长时间的,这里总结一下,避免以后再踩坑.同时也在这篇文章里面补齐一些android开发的基础支持 打开And ...
- RaidoGroup+RadioButton模拟android下拉框弹出List
引用 <上面的Hello world!是居左的,但是下面的文字却怎么都不能靠边.试了各种方法都不行.最后,无意中给RadioButton添加一个backgroud属性即可:<RadioBu ...
- Oracle VirtualBox 模拟Android系统 素材
Android to x86 下载地址: http://www.android-x86.org/download VirtualBox 下载地址: https://www.virtualbox.org ...
- [模拟Android微信]主界面
首先看很像模仿: 走出来: 实现过程: 依赖类库:actionbarsherlock 用actionbarsherlock来实现顶部的搜索的效果. tab用的是Viewpaper实现的. 详细细节: ...
- Android单元测试与模拟测试详解
测试与基本规范 为什么需要测试? 为了稳定性,能够明确的了解是否正确的完成开发. 更加易于维护,能够在修改代码后保证功能不被破坏. 集成一些工具,规范开发规范,使得代码更加稳定( 如通过 phabri ...
- Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!
分类: Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报 android相册layoutobjectclassloade ...
随机推荐
- HDU 5795 博弈
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5795 A Simple Nim Time Limit: 2000/1000 MS (Java/Oth ...
- 关于通过JS识别浏览器类型的方法
JS检测浏览器类型的方法 网络上一般采用navigator.userAgent判断浏览器标识的办法,但是有个麻烦的问题是IE11不断升级之后,IE11的userAgent变成: "Moz ...
- JS 学习笔记--3--数据类型
1.typeof 操作符 用来获取变量或者字面量的类型,也可以typeof(x);但是typeof并非内置函 数,而是一个操作符变量2.JS 一共6种类型 Undefined/Null/Boolean ...
- bzoj 2761 平衡树
裸地平衡树,只需要用到find操作 /************************************************************** Problem: U ...
- 【BZOJ】【3676】【APIO2014】回文串
回文自动机/Manacher+SA 这道题可以用Manacher找出本质不同的回文串(令max增大的所有回文串),然后再用SA跑出来有多少相同. 还有一种做法就是回文自动机(Orz Hzwer)的裸题 ...
- [poj 1741]Tree 点分治
题意 求树上距离不超过k的点对数,边权<=1000 题解 点分治. 点分治的思想就是取一个树的重心,这种路径只有两种情况,就是经过和不经过这个重心,如果不经过重心就把树剖开递归处 ...
- 玩具装箱 bzoj1010 斜率优化
斜率优化的题好像都是这样的方程:左边关于j,k的一个(...)/(...)的式子,右边是个只与i有关的可算的数字: 然后把它放到二维坐标轴上,用单调队列维护一个凸壳,O(n)的复杂度: 这道题但是我发 ...
- window.showModalDialog的传值和返回值
window.showModalDialog(URL,dialogArgments,features) 打开一个新窗口 URL为要将打开的网页地址. dialogArgments为设定好传递给新视窗网 ...
- JavaScript之工厂方式 构造函数方式 原型方式讲解
一.工厂方式可以为一个对象,创建多个实例. var oCar = new Object; oCar.color = "red"; oCar.doors=4; oCar.mpg=23 ...
- js实用功能
//日期格式转换 Date.prototype.format = function (format) { /* * eg:format="yyyy-MM-dd hh:mm: ...