移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览

http://www.cnblogs.com/theroad/p/5397229.html

使用js框架是PhotoSwipe。

PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势。
1、可控制多种风格如:
标题、分享、全屏按钮,点击事件、是否加入字幕,背景透明等。
2、可支持移动端触摸手势兼容pc端
所有的基本手势支持:滑动下一个或上一个,拖动平移、缩放、放大或关闭,点击切换控件,双击放大或缩放。
3、分享
默认的UI有一个按钮,分享链接。默认的链接是facebook,推特和Pinterest,但你可以通过API设置分享类型。
4、用户界面
用户界面是完全从核心脚本分离。完全可以自定义界面。默认photoswipe UI是响应式的,桌面、平板电脑和移动设备完全可以使用。

5、更多功能等你发现。

官网:http://photoswipe.com/

github:https://github.com/dimsemenov/photoswipe

时间: 2024-10-05 09:40:53

移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览的相关文章

模仿微信朋友圈发布时间,将过去时间格式化成xx(秒/分/小时/天)前

模仿微信朋友圈发布时间,使用扩展方法将将过去时间展示成xx(秒/分/小时/天)前,以留言列表中的留言时间为例,先来看一下直接的时间展示效果(date.ToString("yyyy/MM/dd HH:mm:ss")) 感觉很一般,没有什么特别 下面 我们写一个拓展方法,将留言时间格式化成xx(秒/分/小时/天)前 decimal.Truncate(data)//取decimal整数位 public static class HtmlExpansion { //只格式化2天内的时间 pub

Android仿微信朋友圈图片浏览器(支持图片手势缩放,拖动)

※效果 ※使用到的开源库 PhotoView 图片缩放:支持双击缩放,手指捏拉缩放 https://github.com/chrisbanes/PhotoView Universalimageloader 图片下载缓存库 https://github.com/nostra13/Android-Universal-Image-Loader ViewPagerIndicator 分页指示器 https://github.com/JakeWharton/Android-ViewPagerIndicat

仿微信朋友圈图片浏览

仿微信朋友圈图片浏览   Android仿微信朋友圈图片浏览,其中有图片的异步加,双击图片放缩,点击图片退出当前界面,横向滚动图片查看,不是很完善,有兴趣的朋友可以自己改改.  下载地址:http://www.devstore.cn/code/info/829.html  运行截图:    

图片在固定的宽高中不变形展示(访微信朋友圈图片展示)

此主要是结局后台数据给的图片尺寸规格不统一的问题,不过也有缺点,如果图片的尺寸跟你要展示的尺寸差异过大,有可能看不到全图,只能看到中间的部分: 先看实现后的效果图 下面是完整的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片在固定的宽高中不变形展示(访微信朋友圈图片展示)</title> <

微信朋友圈图片显示缩放

近期公司非要做一个和微信朋友圈效果,还要求要惟妙惟肖.感觉最麻烦的就是在图片缩放的部分,结果发现微信在朋友圈图片点击放大的地方是渐入的,可是再次点击的时候是闪出的,没有渐变背景效果,所以修复了一下,如今分享给大家.(仅仅是个demo)详细应用到程序中,还须要大家依据自己的需求进行改进. 先说先原理在贴代码. 小伙伴我们既然要是模仿人家效果,首先是要观察. 1.打开微信朋友圈,点击有图片的它是渐变背景同一时候缩放. 2.再次点击放大后的图片,图片会缩小返回到所在列表的位置,让视觉上感觉是从列表里出

Android仿微信朋友圈图片查看器

转载请注明出处:http://blog.csdn.net/allen315410/article/details/40264551 看博文之前,希望大家先打开自己的微信点到朋友圈中去,仔细观察是不是发现朋友圈里的有个"九宫格"的图片区域,点击图片又会跳到图片的详细查看页面,并且支持图片的滑动和缩放?这个功能是不是很常用呢?!那么我今天正好做了这个Demo,下面为大家讲解一下.首先按照惯例先看一下效果图吧,尤其不会录制gif动画(哎~没办法,模拟器不支持多点触控,刚好我的手机又没有Roo

android 在 ListView 的 item 中插入 GridView 仿微信朋友圈图片显示。

转载请声明出处(http://www.cnblogs.com/linguanh/) 先上张效果图: 1,思路简述 这个肯定是要重写 baseAdapter的了,这里我分了两个数据适配器,一个是自定义的 listView的item 风格xml,另一个是该风格xml文件里面的嵌套的GridView数据适配.然后我们需要两个数据辅助类,类似上述,一个是专门来保存在GridView中要显示的每张图片的信息,例如它的url.name.id等等,暂称该辅助类为 UserImgs,大家可以随便增删,另一个是总

CSS——微信朋友圈图片样式实现方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" /> <style type="t

Android:NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只有1张图时,可以自己定制图片宽高,也可以使用默认九宫格的宽高: 2.当只有4张图时,以2*2的方式显示: 3.除以上两种情况下,都是按照3列方式显示,但这时有一些细节: a.如果只有9张图,当然是以3*3的方式显示: b.如果超过9张图,可以设置是否全部显示. 如果设置不完全显示,则按照3*3的方式