160 lines
4.8 KiB
HTML
160 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>图片预览</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3445167_gwp92uwquwa.css">
|
|
<link rel="stylesheet" href="./index.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="list">
|
|
<img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<script>
|
|
|
|
var scaleNum = 1, rotateNum = 0, startX = null, startY = null, oldLeft = null, oldTop = null, MoveStatus = false;
|
|
|
|
_(".list img").forEach(v => {
|
|
v.onclick = () => {
|
|
$("body").insertAdjacentHTML("beforeend", `
|
|
<div class="preview">
|
|
<div class="zz"></div>
|
|
<img style="transform: scale(${scaleNum}) rotate(${rotateNum}deg); height: 100%; margin-left: 0px;margin-top: 0px;" class="preview_img" src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
|
|
<i class="iconfont icon-close"></i>
|
|
<div class="button">
|
|
<i class="iconfont icon-fanhui"></i>
|
|
<i class="iconfont icon-gengduo"></i>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="iconfont icon-suoxiao"></i>
|
|
<i class="iconfont icon-fangda"></i>
|
|
<i class="iconfont qp icon-quanping"></i>
|
|
<i class="iconfont icon-yulanxuanzhuan left "></i>
|
|
<i class="iconfont icon-yulanxuanzhuan right"></i>
|
|
</div>
|
|
</div>
|
|
`);
|
|
|
|
$(".icon-close").onclick = () => {
|
|
$("body").removeChild($(".preview"))
|
|
}
|
|
|
|
$(".icon-suoxiao").onclick = () => {
|
|
scaleNum = scaleNum - 0.2 < 0.2 ? 0.2 : scaleNum - 0.2
|
|
xuanzhong()
|
|
}
|
|
|
|
$(".icon-fangda").onclick = () => {
|
|
scaleNum += 0.2
|
|
xuanzhong()
|
|
}
|
|
|
|
$(".left").onclick = () => {
|
|
rotateNum -= 90
|
|
xuanzhong()
|
|
}
|
|
|
|
$(".right").onclick = () => {
|
|
rotateNum += 90
|
|
xuanzhong()
|
|
}
|
|
|
|
$(".icon-quanping").onclick = () => {
|
|
if ($(".qp").classList.contains("icon-quanping")) {
|
|
$(".qp").classList.replace("icon-quanping", "icon-beijingyibiyi")
|
|
$(".preview_img").style.height = "auto"
|
|
} else {
|
|
$(".qp").classList.replace("icon-beijingyibiyi", "icon-quanping")
|
|
$(".preview_img").style.height = "100%"
|
|
}
|
|
}
|
|
|
|
$(".preview_img").onmousedown = (e) => {
|
|
MoveStatus = true;
|
|
e.preventDefault();
|
|
e.stopPropagation(); // TODO 事件冒泡
|
|
|
|
startX = e.x;
|
|
startY = e.y;
|
|
|
|
|
|
oldLeft = parseInt($(".preview_img").style.marginLeft);
|
|
oldTop = parseInt($(".preview_img").style.marginTop);
|
|
|
|
$(".preview_img").onmousemove = (e) => {
|
|
console.log("preview_img");
|
|
MouseMove(e)
|
|
}
|
|
|
|
|
|
$(".preview_img").onmouseup = () => {
|
|
MoveStatus = false;
|
|
|
|
$(".preview_img").onmousemove = null
|
|
|
|
}
|
|
}
|
|
|
|
$(".preview_img").onmouseout = () => {
|
|
if (MoveStatus) {
|
|
$(".preview").onmousemove = (e) => {
|
|
console.log("preview");
|
|
console.log("2 MoveStatus: ", MoveStatus);
|
|
MouseMove(e)
|
|
}
|
|
}
|
|
}
|
|
|
|
$(".preview").onmouseup = () => {
|
|
MoveStatus = false;
|
|
$(".preview_img").onmousemove = null
|
|
$(".preview").onmousemove = null
|
|
}
|
|
|
|
|
|
|
|
}
|
|
})
|
|
|
|
function MouseMove(e) {
|
|
console.log("3 status: ", status);
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var moveX = e.x, moveY = e.y;
|
|
var offsetX = moveX - startX, offsetY = moveY - startY;
|
|
|
|
console.log("移动数值：", offsetX, offsetY);
|
|
|
|
$(".preview_img").style.marginLeft = `${offsetX + oldLeft}px`;
|
|
$(".preview_img").style.marginTop = `${offsetY + oldTop}px`;
|
|
}
|
|
|
|
function xuanzhong() {
|
|
$(".preview_img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
|
|
}
|
|
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |