堆叠相冊效果,兼容pc和移动端
在手机端,堆叠效果的相冊是比較常见的一种图片展示方式,每一个人的思路可能会有一些不同,实现的方法不同。
本篇博客主要是分享下我的实现方法。欢迎大家提出建议,指出我的不足,先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和移动端的更多相关文章
- HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
- Android百日程序:GridView实现相冊效果
本章使用GridView控件来做一个相冊效果. 图片效果例如以下: 响应点击事件,点击的时候提示是当前第几章图片.从左到右,从上到下. 点击了第一张图片,显示了1. 步骤: 一 新建项目,然后把图片资 ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
- scrollMenu,一款可滚动的菜单插件 兼容pc和移动端
这个菜单 有两种样式 , 也可以通过animate.css加不同的动画效果!滚动的方式也有两种 一种为通用的overflow,另外一种是better-scroll的滚动效果 在线链接地址 ht ...
- js实现一个可以兼容PC端和移动端的div拖动效果
前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...
- iOS图片加水印效果的实现并保存至相冊
图片加水印效果的实现并保存至相冊 实现效果如图: project下载:githubproject下载链接 代码: - (void)viewDidLoad { [super viewDidLoad]; ...
- android高仿微信拍照、多选、预览、删除(去除相片)相冊功能
先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...
- 表单界面的兼容PC手机端解决方案
就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端),这星期已经加班做快递扫码模块(react+node),所以我感觉只有弹药备足了才能稍微轻松些应对各种需求.实话说在同个部门的大佬面前差距确实大,如 ...
随机推荐
- 通过adb shell操作android真机的SQLite数据库
要通过命令行直接操作android真机上的SQLite数据库,可以直接通过adb shell来完成,不过,前提是必须获得root权限. 另外,android系统其实就是linux的shell,这个应该 ...
- 能够区分光驱的类型么?比如CDROM、DVD还是CD-RW
http://www.jubao163.com/it/bianchengwendang/2007-06-17/14948.shtml typedef struct _SCSI_PASS_THROUGH ...
- POJ 1458 Common Subsequence(最长公共子序列LCS)
POJ1458 Common Subsequence(最长公共子序列LCS) http://poj.org/problem?id=1458 题意: 给你两个字符串, 要你求出两个字符串的最长公共子序列 ...
- CLR基础,CLR运行过程,使用dos命令创建、编译、运行C#文件,查看IL代码
CLR是Common Language Runtime的缩写,是.NET程序集或可执行程序运行的一个虚拟环境.CLR用于管理托管代码,但是它本身是由非托管代码编写的,并不是一个包含了托管代码的程序集, ...
- Android之ConnectivityManager
在android平台中ConnectivityManager主要负责查询网络连接状态以及在连接状态有变化的时候发出通知.其主要的功能职责如下: 1. 监视网络状态,包括(Wi-Fi.GPRS.UMT ...
- Mybatis 传入List类型参数,报错:There is no getter for property named '__frch_item_0' in
错误如下: org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.reflection.Re ...
- UnityEditor研究学习之自定义Editor
UnityEditor研究学习之自定义Editor 今天我们来研究下Unity3d中自定义Editor,这个会让物体的脚本在Inspector视窗中,产生不同的视觉效果. 什么意思,举个例子,比如游戏 ...
- matlab 投影
function[l]= Gray(I) % I: The name of image A=imread(I);m=0;n=0;[m,n]= size(A);Hproj=zeros(m,1);Vpro ...
- C/C++嵌入式开发面试题
C/C++嵌入式开发面试题 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SECONDS_PER_YEA ...
- 第二十四章 springboot注入servlet
问:有了springMVC,为什么还要用servlet?有了servlet3的注解,为什么还要使用ServletRegistrationBean注入的方式? 使用场景:在有些场景下,比如我们要使用hy ...