在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同。

本篇博客主要是分享下我的实现方法。欢迎大家提出建议,指出我的不足,先3Q啦~

先看一下终于的效果图:

思路和原理分析:

1、首先是布局上的问题。默认显示五张错位图片,剩下的图片遮挡在第五张图片的背后。错位使用的是css3的transform的属性,使用rotate属性值。对显示的五张图片进行不一样的旋转。

2、js实现上的问题。

(1)推断移动端和pc端。相应兼容使用mouse事件还是touch事件

(2)滑动的动作,加入滑动的距离推断,在某个范围内有效

(3)图片切换。第一张滑走后移动到图片队列的最后,循环显示。这个过程中,须要注意的仅仅是index的值。以及显示和消失的动画

通过上面的大概分析,这个堆叠画冊实现起来并没有什么难点,easy实现。

为了以后用起来方便,结合了jq。写成了jquery的插件形式。最后使用dom绑定这个插件的函数就可以。

整个项目的代码下载地址:http://pan.baidu.com/s/1bnfMhAZ

详细的代码不贴上来了,能够把代码下载下来后查看。

代码都是依据上面的思路去实现的。

堆叠相冊效果,兼容pc和移动端的更多相关文章

  1. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  2. Android百日程序:GridView实现相冊效果

    本章使用GridView控件来做一个相冊效果. 图片效果例如以下: 响应点击事件,点击的时候提示是当前第几章图片.从左到右,从上到下. 点击了第一张图片,显示了1. 步骤: 一 新建项目,然后把图片资 ...

  3. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  4. 手把手教你做一个原生js拖动滑块【兼容PC和移动端】

    废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...

  5. scrollMenu,一款可滚动的菜单插件 兼容pc和移动端

    这个菜单 有两种样式  , 也可以通过animate.css加不同的动画效果!滚动的方式也有两种   一种为通用的overflow,另外一种是better-scroll的滚动效果 在线链接地址  ht ...

  6. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  7. iOS图片加水印效果的实现并保存至相冊

    图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...

  8. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

  9. 表单界面的兼容PC手机端解决方案

    就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求.实话说在同个部门的大佬面前差距确实大,如 ...

随机推荐

  1. windows的磁盘操作之九——区分本地磁盘与移动硬盘

    http://cutebunny.blog.51cto.com/301216/674443 最近碰到了个新问题,记录下来作为windows的磁盘操作那个系列的续篇吧. 一些时候我们的程序需要区分本地存 ...

  2. OpenCV 机器学习之 支持向量机的使用方法实例

    用支持向量机进行文理科生的分类,根据的特征主要是 数学成绩与语文成绩,这两个特征都服从高斯分布 程序代码例如以下: 分类结果:

  3. 字符串变量作mysql查询条件

    原文:http://blog.csdn.net/qing_gee/article/details/41646503 当你的查询条件是一个字符串变量时,你该怎么办,比如字符串可能是“0001ME,000 ...

  4. 7. python 字符串格式化方法(2)

    7. python 字符串格式化方法(2) 紧接着上一章节,这一章节我们聊聊怎样添加具体格式化 就是指定替换字段的大小.对齐方式和特定的类型编码,结构如下: {fieldname!conversion ...

  5. 解决ElasticSearch5.x中@Field注解之IK分词不能用的问题

    一.概述 环境:ElasticSearch版本5.6.3,SpringBoot 2.0.2.RELEASE,索引myIndex 问题描述:使用@Field注解给实体类指定ik分词解析器(ik_smar ...

  6. AutoMapper: Mapper.Initialize() 只能调用一次,Why?

    最开始的代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  7. OpenCL 获取Program信息

    本程序生成一个OpenCL Program,然后获取Program的source,事实上它的source就是一个char[],能够打印出来. 然后我们把这些内容和原来文本的内容对照,看看是否是我们想要 ...

  8. java自动创建多级目录

    // 创建文件上传路径 public static void mkdir(String path) { File fd = null; try { fd = new File(path); if (! ...

  9. 《Windows核心编程》第八章——用户模式下的线程同步

    下面起了两个线程,每个对一个全局变量加500次,不假思索进行回答,会认为最后这个全局变量的值会是1000,然而事实并不是这样: #include<iostream> #include &l ...

  10. Python3.6学习笔记(六)

    WSGI Python Web Server Gateway Interface 规范学习 由于Python的灵活性,提供了多种方式可以作为服务端语言,包括Python编写的服务器(Medusa).P ...