引用了hammer.min.js
js代码 img-app.js
(function (doc, win) {//这段代码是做手机端rem适应的
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth>640){
clientWidth=640
}
if (!clientWidth) return;
else{
docEl.style.fontSize = clientWidth / 3.75 + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
$(function () {
//图片预览
$(".imgflexible").click(function () {
$(".box").css("display","flex");
$(".box img").attr("src",$(".imgflexible").attr("src"))
})
$(".box").click(function () {
$(".box").css("display","none");
$(".box img").attr("src",'')
})
doToAll(document.getElementsByClassName('yulan'), function(element){
var hammer = new Hammer(element)
hammer.get('pan').set({direction: Hammer.DIRECTION_ALL});//激活pan(移动)功能
hammer.get('pinch').set({enable: true});//激活pinch(双指缩放)功能
hammer.on("panstart", function(event) {
var left = element.offsetLeft;
var tp = element.offsetTop;
hammer.on("panmove", function(event) {
element.style.left = left + event.deltaX + 'px';
element.style.top = tp + event.deltaY + 'px';
});
})
hammer.on("pinchstart", function(e) {
hammer.on("pinchout", function(e) {
element.style.transition = "-webkit-transform 300ms ease-out";
element.style.webkitTransform = "scale(2.5)";
});
hammer.on("pinchin", function(e) {
element.style.transition = "-webkit-transform 300ms ease-out";
element.style.webkitTransform = "scale(1)";
});
})
})
})
//预览图片,获取节点方法
function doToAll(elems, fn){
var len = elems.length
while(--len > -1){
fn(elems[len])
}
}
html+css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
html{
height:100%;
}
body{
height:100%;
}
.box {
width: 3.75rem;
height:100%;
background: #333;
position: absolute;
top:0px;
left:0px;
margin: 0 auto;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
display: none;
overflow: hidden
}
.box img{
width:100%;
position: absolute;
}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" type="text/javascript" charset="utf-8"></script>
<script src="img-app.js" ></script>
</head>
<body>
<img class="imgflexible" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545628346247&di=f2fcd4f88291e0f60d6599602ee8ab20&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3304533311%2C1137740692%26fm%3D214%26gp%3D0.jpg"/>
<div class="box">
<img src="" />
</div>
</body>
</html>
不是专业前端,所以样式不太好看,PC端的体验不是很好,只是简单放大,移动。移动端可以双指拉伸,缩放功能,不是非常完美。
文章引用:http://www.voidcn.com/article/p-qylsnsnv-bxw.html
文章引用2:https://blog.csdn.net/weixin_43099985/article/details/85233931