原 Swiper实现图片预览效果

作者:汪娇娇 日期:2018年3月10日

一、介绍

先用几张图来和大家描述一下什么是图片预览效果吧。

图一:图片列表;

图二:点击列表中 “小猫” 这张图片,会弹出图二这样的预览图;

图三:对图二向左或向右滑动会出现图三的样子,滑动的距离和区域小于某个值时,图片还是会回到当前这张图,超过某个值了,就会滑到上一张图或下一张图;

图四:对图二,向左滑动,并且超出界定的值了,滑到了 “小猫” 的下一张图片 “大海”。

二、实现

实现起来其实很简单,就是用Swiper,下面直接贴代码,我用的是Swiper4 。

1、HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="telephone=no" name="format-detection">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
		<title>照片预览</title>
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.1.6/css/swiper.min.css">
	</head>

	<body>
		<!--图片列表容器-->
		<ul class="all-works-box"></ul> 

		<!--图片预览容器-->
		<div class="prompt-bg hide"><br />
			<div class="swiper-container">
				<div class="swiper-wrapper"></div>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
	<script src="https://cdn.bootcss.com/lazysizes/4.0.1/lazysizes.min.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/4.1.6/js/swiper.min.js"></script>
	<script src="js/index.js"></script>

</html>

2、LESS

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
}

img {
    display: block;
    border: 0;
    width: 100%;
}

.translateZ(@status) {
    transform: translateZ(@status);
    -webkit-transform: translateZ(@status);
    -moz-transform: translateZ(@status);
    -o-transform: translateZ(@status);
}

.flex {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    display: box;
}

.align-items(@status) {
    align-items: @status;
    -webkit-align-items: @status;
    -moz-align-items: @status;
    -ms-align-items: @status;
    -o-align-items: @status;
    -webkit-box-align: @status;
}

.flex-wrap(@status) {
    flex-wrap: @status;
    -webkit-flex-wrap: @status;
    -moz-flex-wrap: @status;
    -ms-flex-wrap: @status;
    -o-flex-wrap: @status;
}

body,
html {
    width: 100%;
    height: 100%;
}

body {
    background: #ff7981;
    font-size: 0.35rem;
    color: #707070;
    position: relative;
}

.all-works-box {
    box-sizing: border-box;
    padding: 2%;
    .flex;
    .flex-wrap(wrap);
    .all-works-li {
        background: #fff;
        width: 32%;
        margin-right: 2%;
        margin-bottom: 2%;
        box-sizing: border-box;
        padding: 1%;
        div {
            overflow: hidden;
            .flex;
            .align-items(center);
        }
    }
    .no-margin {
        margin-right: 0;
    }
    .user-name {
        padding: 1% 0;
        font-size: 0.3rem;
    }
}

.prompt-bg {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    .translateZ(1);
    overflow: hidden;
}

.swiper-container {
    height: 100%;
    .swiper-slide {
        .flex;
        .align-items(center);
        overflow: auto;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
        img{
            margin: auto; //解决flex布局overflow,并且图片超过屏幕高度时,图片无法滑动到顶部
        }
    }
}

.hide {
    display: none;
}

注:flex布局当overflow时无法滑动到顶部

3、JS

var index = {},
	mySwiper = null;

$(function($) {
	index.allWorks();

	mySwiper = new Swiper('.swiper-container', {
		observer: true, //启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
		observeParents: true //将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。
	});
})

index = {
	allWorks: function() { // 获取图片列表
		$.ajax({
			type: 'get',
			url: "json/works.json",
			success: function(res) {
				index.promptDataInit(res);

				var awardFrag = document.createDocumentFragment(),
					noMargin = "";

				$(".all-works-box").empty();
				$.each(res, function(index, item) {
					if((index + 1) % 3 == 0) {
						noMargin = "no-margin";
					} else {
						noMargin = "";
					}
					$(awardFrag).append('<li class="all-works-li ' + noMargin + '"> <div><img class="lazyload work" data-id="' + item.id + '" data-src = "' + item.imgSrc + '"></div> <p class = "user-name"> ' + item.username + ' </p></li>');
				})
				$(".all-works-box").append($(awardFrag));

				index.clickPicPromptShow();
			}
		})
	},
	clickPicPromptShow: function() { //点击图片弹出大图
		$(".all-works-li div").height($(".all-works-li").width()); //展示的图片都是正方形

		$(".work").each(function() {
			var _this = this;
			index.tap($(this)[0], function() {
				var id = parseInt($(_this).attr("data-id")) - 1;
				mySwiper.slideTo(id);
				$(".prompt-bg").removeClass("hide");
			})
		})
	},
	promptDataInit: function(promptInfo) { //图片预览容器数据初始化
		$(".swiper-wrapper").empty();
		var promptFrag = document.createDocumentFragment();
		$.each(promptInfo, function(index, item) {
			$(promptFrag).append('<div class="swiper-slide"><img class="main-pic lazyload" data-src="' + item.imgSrc + '"></div>');
		})
		$(".swiper-wrapper").append($(promptFrag));
	},
	tap: function(node, callback, scope) { //移动端的“点击”
		node.addEventListener("touchstart", function(e) {
			x = e.touches[0].pageX;
			y = e.touches[0].pageY;
		});
		node.addEventListener("touchend", function(e) {
			e.stopPropagation();
			var curx = e.changedTouches[0].pageX;
			var cury = e.changedTouches[0].pageY;
			if(Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
				callback.apply(scope, arguments);
			}
		});
	}
}

$(".prompt-bg").each(function() {
	index.tap($(this)[0], function() {
		$(".prompt-bg").addClass("hide");
	})
})

4、JSON

图片数据存在这个JSON里,所以那些图片信息都是动态获取的。

注:动态获取数据后再初始化Swiper会出现滑动卡顿的问题,为了解决这个问题,Swiper官网文档有observe 和 observeParents 这2个方法。

observer

启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。 默认false,不开启,可以使用update()方法更新。

observeParents

将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新。

[
	{
		"id":"1",
		"imgSrc": "img/1.jpg",
		"username":"星星"
	},
	{
		"id":"2",
		"imgSrc": "img/2.jpg",
		"username":"月亮"
	},
	{
		"id":"3",
		"imgSrc": "img/3.jpg",
		"username":"星星"
	},
	{
		"id":"4",
		"imgSrc": "img/4.jpg",
		"username":"星星"
	},
	{
		"id":"5",
		"imgSrc": "img/5.jpg",
		"username":"星星."
	},
	{
		"id":"6",
		"imgSrc": "img/6.jpg",
		"username":"星星."
	},
	{
		"id":"7",
		"imgSrc": "img/7.jpg",
		"username":"星星"
	},
	{
		"id":"8",
		"imgSrc": "img/8.jpg",
		"username":"星星"
	},
	{
		"id":"9",
		"imgSrc": "img/9.jpg",
		"username":"星星"
	},
	{
		"id":"10",
		"imgSrc": "img/10.jpg",
		"username":"星星"
	},
	{
		"id":"11",
		"imgSrc": "img/11.jpg",
		"username":"星星 -"
	},
	{
		"id":"12",
		"imgSrc": "img/12.jpg",
		"username":"星星"
	},
	{
		"id":"13",
		"imgSrc": "img/13.jpg",
		"username":"星星"
	},
	{
		"id":"14",
		"imgSrc": "img/1.jpg",
		"username":"星星"
	},
	{
		"id":"15",
		"imgSrc": "img/2.jpg",
		"username":"星星"
	},
	{
		"id":"16",
		"imgSrc": "img/3.jpg",
		"username":"星星"
	},
	{
		"id":"17",
		"imgSrc": "img/4.jpg",
		"username":"星星"
	},
	{
		"id":"18",
		"imgSrc": "img/5.jpg",
		"username":"星星."
	},
	{
		"id":"19",
		"imgSrc": "img/6.jpg",
		"username":"星星."
	},
	{
		"id":"20",
		"imgSrc": "img/7.jpg",
		"username":"星星"
	},
	{
		"id":"21",
		"imgSrc": "img/8.jpg",
		"username":"星星"
	},
	{
		"id":"22",
		"imgSrc": "img/9.jpg",
		"username":"星星"
	},
	{
		"id":"23",
		"imgSrc": "img/10.jpg",
		"username":"星星"
	},
	{
		"id":"24",
		"imgSrc": "img/11.jpg",
		"username":"星星 -"
	}
]

做法其实很简单,主要利用 Swiper 就能很快实现,感兴趣的可以去尝试一下,有问题的直接私信我就行,谢谢 ~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Guangdong Qi

iOS开发常用之UI模糊效果、自动版式

12530
来自专栏GIS讲堂

Geoserver2.11矢量切片与OL3中的调用展示

GIS的底图一直使用金字塔技术进行切图,使用户能够快速访问指定级别的地图或者影像。但是切图本身是一张图片,无法进行交互。于是又引入了矢量图层用来显示矢量点线面,...

21830
来自专栏HT

基于HT for Web矢量实现3D叶轮旋转

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的...

20460
来自专栏互联网软件技术

消息提示框-事件冒泡

17530
来自专栏deepcc

css 强制不换行

41090
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

18430
来自专栏天天

微信小程序 云开发之数据库

对后来在仔细的阅读,发现,在我的json中key:value中的value有单引号,本身json格式就不对,后来改了之后还是不行,原因就是需要按照文档中的格式来...

1.8K20
来自专栏Python小屋

Python操作高版本Excel文件:颜色、边框、合并单元格

本文主要颜色Python扩展库openpyxl的一些基本用法,包括创建工作簿、选择活动工作表、写入单元格数据,设置单元格字体颜色、边框样式,合并单元格等等。 f...

64250
来自专栏hightopo

基于HT for Web矢量实现3D叶轮旋转

15840
来自专栏HT

基于HTML5 WebGL实现3D飞机叶轮旋转

在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各...

28780

扫码关注云+社区

领取腾讯云代金券