一款豪华绚丽的移动端图册(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:代码较多就不上了,需要的找我!

时间: 2024-08-25 12:18:25

一款豪华绚丽的移动端图册(zepto.js+photoswipe.js)的相关文章

一款开源的游戏服务端引擎KBEngine

什么是KBEngine? 一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互,使用KBEngine插件能够快速与(Unity3D, OGRE, Cocos2d-x, HTML5, 等等)技术结合形成一个完整的客户端. 服务端底层框架使用C++编写,游戏逻辑层使用Python(支持热更新),开发者无需重复的实现一些游戏服务端通用的底层技术,将精力真正集中到游戏开发层面上来,快速的打造各种网络游戏. (经常被问到承载上限,kbengine底层架构被设计为多进程分布式动态负载均

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

在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信大家一定会喜欢! 主要特性 Freetie来自于Assemblage和 Assemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方: 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你

移动端:zepto框架

zepto框架 一.zepto框架概述 Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库兼容性: Zepto.js是专门为现代智能手机浏览器推出的JavaScript框架 Zepto的一些可选功能专门针对移动浏览器,因为最初的目标是专门为移动网站提供一个精简的jQuery替代方案 优势: 更小型的JavaScript框架 完全兼容jQuery语法 精简大量浏览器兼容性代码,更轻量 封装了移动端手势 下载: www.zeptojs.cn 网站上通过点击Download打开下载页

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

随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的就是一些超绚丽的jQuery焦点图动画插件,有些不仅基于jQuery,还带有CSS3的动画特效,因此显得更加炫酷. 1.jQuery实用图片滑块焦点图 支持移动端滑动 今天我们要再来介绍一款jQuery实用图片滑块焦点图,它也支持移动端的触屏滑动,这款插件并没有特别的动画效果,但方便实用. 在线演示

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

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

移动端触屏滑动,JS事件

先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件能跟踪到屏幕滑动的每根手指. 以下是四种touch事件 touchstart:手指放到屏幕上时触发 touchmove:手指在屏幕上滑动式触发 touchend:手指离开屏幕时触发 touchcan

移动端翻页插件dropload.js(支持Zepto和jQuery)

一. 声明 代码来源:github上的dropload项目. 二. 问题 dropload.js提供了最基本的上拉翻页,下拉刷新功能.对于由服务端一次返回所有数据的情况基本通用. 但是,需求往往不是服务端一次性返回所有数据,往往还要支持服务端分页,搜索,排序,多条件筛选等功能.(比较类似美团美食的界面) 三. 解决方案. 改进1:由于有分页,搜索,排序,多条件筛选功能,可能都不需要上拉,进到页面就没有数据. 例如:搜索一个服务端不存在的名字. 所以,添加接口设置setHasData. MyDro

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0

移动端开发框架Zepto.js

一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻量:只支持现代浏览器:非常方便的搭配其他框架(phoneGap)来编写代码:优秀的源代码,性能良好. zepto和jQuery的对比: 浏览器兼容:zepto偏移动端,jQuery偏PC端: 文件大小:zepto 10k jQuery 30k  : 部分API接口:参数和执行结果有可能不一致: 生态圈:j