应公司要求,开发一款移动端杂志(等同于移动端幻灯片相册,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)的更多相关文章

  1. 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...

  2. 爬虫05 /js加密/js逆向、常用抓包工具、移动端数据爬取

    爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 目录 爬虫05 /js加密/js逆向.常用抓包工具.移动端数据爬取 1. js加密.js逆向:案例1 2. js加密.js逆向:案例2 3 ...

  3. 移动端--用PX为单位+JS框架 实现页面布局

    一:大家先下载metahandler.js 二:准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架 1.视口设置 width=640,是根据psd图来设置,有多宽设 ...

  4. 手机端移动端的选择框mobileSelect.js使用

    手机端移动端的选择框mobileSelect.js使用 文件地址:https://github.com/onlyhom/mobileSelect.js 请感兴趣的自行下载 使用过程 1 引入标签 &l ...

  5. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  6. html+js(swiper.js)+css左右滑动切换页面效果,适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  7. 8款超绚丽的jQuery焦点图动画

    随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...

  8. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  9. 移动端打印调试插件 - debug.js 介绍

    前文中我们学习过,用 Fiddler 作为代理可以在移动端打开本地的页面进行查看(如何用 fiddler 代理调试本地手机页面),但是对于 js 的调试却无能为力(需要借助其他调试手段,比如 UC浏览 ...

随机推荐

  1. MVC接收以post形式传输的各种参数

    近日研究用wcf框架接收同事Android端以post形式传输的各种类型的参数,来做处理.但研究过程中问题比较多,首先键值对的形式是实现了,传输int,string类型都不成问题,但是到传输文件的时候 ...

  2. ref - 按引用传递参数

    传递的是引用 在 形参 实参前 加ref

  3. CentOS安装JDK7

    1.下载jdk-7-linux-x64.rpm(http://www.Oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-downlo ...

  4. 启用DHCP中继代理,实现跨子网服务 - Win 2003 Server

    伴随着局域网规模的逐步扩大,一个网络常常会被划分成多个不同的子网,以便根据不同子网的工作要求来实现个性化的管理要求.考虑到规模较大的局域网一般会使用DHCP服务器来为各个工作站分配IP地址,不过一旦局 ...

  5. 向Dialog中添加一个新的Menu

    1.创建一个新的Menu,在资源管理视图中,右键Menu-->传入Menu 2.设计新Menu,ID为IDR_MENU1 3.在该Dialog的源文件中,找到CTest001Dlg::OnIni ...

  6. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

  7. php入门自学小展示

    <!doctype html> <html> <head> <title>PHP函数小展示</title> </head> &l ...

  8. phpcms 2008和discuz X3.1实现同步登陆退出论坛(已实现)

    网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了.       以下网络上抄 ...

  9. 用dup2和dup产生一份file descriptor 的拷贝

    在类Unix操作系统里面,.dup2和dup都通过系统调用来产生一份file descriptor 的拷贝.   dup对我来说还很简单   int dup(int filedes);   dup2就 ...

  10. 复杂事件处理引擎—Esper入门

    说明: 以下内容,可以参考Esper官方网站<Qucik start & Tutorial >(顺序做了部分调整). PS:因为英语水平有限(大学期间刚过CET4的英语小盲童一枚) ...