html+移动端图片点击放大,移动端点击图片放大特效PhotoSwipe.js插件实现

PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能

photoswipe之移动端图片放大查看，滑动切换下一张，图片保存到本地。

.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}

.pnav a{padding:4px}

.pnav a.cur{background:#007bc4;color:#fff;}

.demo{width:80%; margin:10px auto}

/*必要样式*/

#photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}

#photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}

.my-gallery {

width: 100%;

float: left;

}

.my-gallery img {

width: 100%;

height: auto;

}

.my-gallery figure {

display: block;

float: left;

margin: 0 5px 5px 0;

width: 150px;

}

.my-gallery figcaption {

display: none;

}

js代码：

var openPhotoSwipe = function() {

var pswpElement = document.querySelectorAll('.pswp')[0];

var items = [

{

src: 'images/s1.jpg',

w: 800,

h: 1142

{

src: 'images/s2.jpg',

w: 800,

h: 1142

{

src: 'images/s3.jpg',

w: 800,

h: 1142

{

src: 'images/s4.jpg',

w: 800,

h: 1142

{

src: 'images/s5.jpg',

w: 800,

h: 1142

}

];

var options = {

history: false,

focus: false,

showAnimationDuration: 0,

hideAnimationDuration: 0

};

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

gallery.init();

};

document.getElementById('photos').onclick = openPhotoSwipe;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

html+移动端图片点击放大,移动端点击图片放大特效PhotoSwipe.js插件实现相关推荐

html图片上传阅览并且点击放大
关闭 qq_31540195的博客目录视图摘要视图订阅异步赠书:9月重磅新书升级,本本经典程序员9月书讯每周荐书:ES6.虚拟现实.物联网(评论送书) htm ...
pc端点击图片放大效果
1.在pc端会遇到点击图片,然后让页面添加蒙版,图片居中放大的效果: 效果图如下 2.代码实现方式:问题解决 <!DOCTYPE html> <html><head> ...
iOS 图片捏合放大缩小点击放大缩小
此处的图片控件,我用的是UIButton,因为它自身有点击事件,不过UIImageView同理,为其添加手势即可实现同样的效果. // // ServiceResultViewController. ...
手机端点击图片放大特效-PhotoSwipe插件
PhotoSwipe插件官方网站 http://www.photoswipe.com/ PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能但有一点不太好的是图片放大后再单击不 ...
在html上点击一张图片时放大照片,网页中图片自动缩小，点击放大（以防页面被撑大）的方法...
我们在开发动态网站的时候,一般都会在后台让用户添加文章,在添加文章的过程中难免用户会添加一些大的图片,这样,在前台显示的时候图片就会把页面撑的很大,很难看,今天就教大家利用JavaScript函数来实 ...
h5 img js 点击图片放大_网页对应图片点击放大 html+js
$(function() { $('img').click(function() { var _this = $(this);// 将当前的pimg元素作为_this传入函数 imgShow(&quo ...
Android RecyclerView 显示图片列表，点击查看大图，手指可放大缩小
该文章基于前篇:https://blog.csdn.net/zhu_nana/article/details/108222330 接着上一篇,直接上代码 holder.myView.setOnClic ...
Markdown给图片添加超链接，点击图片后，跳转新页面。放大缩小图片。
公司用Markdown写了个项目说明有个需求,就是点击图片,跳转到图片的链接(因为markdown不能放大缩小图片) 下面是超链接用法: ![alt属性文本](图片地址 ''图片title'') a ...
html+js 点击图片放大、点击图片全屏
html 点击图片放大,图片全屏,再点击关闭全屏,我这里直接整理成一个js,使用方便. 使用步骤: 1.引用 jq 2.引用 imgEnlarge.js. 3.没了. 直接上代码,这个是测试代码. & ...
如何把图片无损放大？教你图片怎么无损放大
随着数字图像技术的不断发展,图片无损放大成为了许多人关注的问题.当我们需要将小图片放大到更大的尺寸时,使用传统的放大方法可能会导致图片失真.模糊等质量问题.那么如何在保持高清晰度和精度的同时进行无损放 ...

html+移动端图片点击放大,移动端点击图片放大特效PhotoSwipe.js插件实现

html+移动端图片点击放大,移动端点击图片放大特效PhotoSwipe.js插件实现相关推荐

最新文章

热门文章