一款豪华绚丽的移动端图册(zepto.js+photoswipe.js)
应公司要求,开发一款移动端杂志(等同于移动端幻灯片相册,iOS上能轻松滑动缩放,android上也能滑动缩放)。网上找了很久没有符合需求的插件,无意间找到了photoswipe,进行改造之后就成了符合自己的移动端图册了。
改造点:
1.原插件默认进入页面是相册列表,返回或者关闭会退回到图册列表,通过追踪找到这个方法并干掉了!
2.新增拖动条跳转(ps:插件默认全屏滑动,该处实现思路是应用ifram定位来实现的,子页面拖动链接跳转对应指定的id);
3.新增当前页显示,插件有该方法;
4.解决ios微信下载pdf,返回到空白页bug(ps:将链接replace,不用href跳转);
5.解决点击分享或下载时也放大(ps:插件默认点击任何区域都是放大或缩小,找到该方法干掉);
6.解决进入页面页面错乱bug,页面初始化时window.location.href='/photo/index.html#&gid=1&pid=1';//页面默认跳转到一页
分享效果:
分页及当前页效果:
效果预览:http://m.qikan.molbase.com/index.php?&a=show&catid=6&id=2#&gid=1&pid=1
ps:代码较多就不上了,需要的找我!
一款豪华绚丽的移动端图册(zepto.js+photoswipe.js)的更多相关文章
- 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..
https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...
- 爬虫05 /js加密/js逆向、常用抓包工具、移动端数据爬取
爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 目录 爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 1. js加密.js逆向:案例1 2. js加密.js逆向:案例2 3 ...
- 移动端--用PX为单位+JS框架 实现页面布局
一:大家先下载metahandler.js 二:准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架 1.视口设置 width=640,是根据psd图来设置,有多宽设 ...
- 手机端移动端的选择框mobileSelect.js使用
手机端移动端的选择框mobileSelect.js使用 文件地址:https://github.com/onlyhom/mobileSelect.js 请感兴趣的自行下载 使用过程 1 引入标签 &l ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- 移动端打印调试插件 - debug.js 介绍
前文中我们学习过,用 Fiddler 作为代理可以在移动端打开本地的页面进行查看(如何用 fiddler 代理调试本地手机页面),但是对于 js 的调试却无能为力(需要借助其他调试手段,比如 UC浏览 ...
随机推荐
- Python基础类型
1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 names = ['Alex',"Tenglan",'Eric ...
- SuperSocket快速入门(一):什么是SuperSocket
什么是SuperSocket SuperSocket(下文简称SS)是一个轻量级, 跨平台而且可扩展的 .Net/Mono Socket 服务器程序框架.你无须了解如何使用 Socket, 如何维护 ...
- mysql怎么限制某些查询语句的执行?
mysql怎么限制某些查询语句的执行? 比如某些sql语句执行时间很长,超过10s,怎么样超过10s就不让其执行? 后续更新中...
- 网络编程 socket-实例
1.设计界面: 2.效果界面: 3.具体实现代码: public partial class frmMain : Form { public frmMain() { InitializeC ...
- [欢度国庆]为什么我们今天还要学习和使用C++?(转载)
在各种新的开发语言层出不穷的今天,在Java和C#大行其道今天,我们为什么还要学习和使用C++?现在学习C++将来有用吗?学习C++要花费那么多时间和精力,这一切都值得吗?现在学习C++有钱途吗? 这 ...
- MySQL是否在扫描额外的记录
在确定查询只是返回需要的数据之后,接下来应该看看查询为了返回结果是否扫描了过多的数据.对于MySQL,最简单的衡量查询开销的三个指标如下: 1响应时间,2扫描行数,3返回行数 没有那个指明能够完美的衡 ...
- HashMap工作原理
hashmap存储的为key-value键值对,get的时间复杂度是O(1),具体实现原理如下: 1. hashmap是基于数组之上,通过一定算法,用空间转换时间 2. hashmap的数据结构为数组 ...
- nginx-301重定向开始
日常工作中使用301重定向的情况很多:如网页目录结构变动,网页重命名.网页的扩展名改变.网站域名改变.SEO优化.等等,301重定向可以很方便的使页面实现跳转. 参考 URL重写模块 一.首先更改配置 ...
- wdcp/wdlinux 常用工具及命令集
强制修改Mysql的root密码,在忘记mysql密码时有用 sh /www/Wdlinux/tools/mysql_root_chg.sh ftp配置文件检查,在FTP不能连接或登录时有用sh /w ...
- php中magic_quotes_gpc函数详解
magic_quotes_gpc函数在php中的作用是判断解析用户提示的数据,如包括有:post.get.cookie过来的数据增加转义字符“\”,以确保这些数据不会引起程序,特别是数据库语句因为特殊 ...