140 lines
4.2 KiB
HTML
140 lines
4.2 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>Document</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3445167_gwp92uwquwa.css">
|
|
<link rel="stylesheet" href="./图片预览.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, offsetX = null, offsetY = null, Movestatus = true
|
|
|
|
|
|
_(".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
|
|
xuanzhuan()
|
|
}
|
|
|
|
$(".icon-fangda").onclick = () => {
|
|
scaleNum += 0.2
|
|
xuanzhuan()
|
|
}
|
|
|
|
$(".left").onclick = () => {
|
|
rotateNum -= 90
|
|
xuanzhuan()
|
|
}
|
|
$(".right").onclick = () => {
|
|
rotateNum += 90
|
|
xuanzhuan()
|
|
}
|
|
$(".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
|
|
OldLeft = parseInt($(".preview_img").style.marginLeft)
|
|
OldTop = parseInt($(".preview_img").style.marginTop)
|
|
startX = e.x,
|
|
startY = e.y
|
|
|
|
|
|
$(".preview_img").onmousemove = (e) => {
|
|
|
|
MouseMove(e)
|
|
|
|
}
|
|
|
|
|
|
$(".preview_img").onmouseup = () => {
|
|
Movestatus = false
|
|
$(".preview_img").onmousemove = null
|
|
}
|
|
}
|
|
|
|
$(".preview_img").onmouseout = () => {
|
|
$(".preview").onmousemove = (e) => {
|
|
if(Movestatus){
|
|
MouseMove(e)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
$(".preview").onmouseup = () => {
|
|
Movestatus = false
|
|
$(".preview_img").onmousemove = null
|
|
$(".preview").onmousemove = null
|
|
|
|
}
|
|
}
|
|
})
|
|
|
|
function MouseMove(e) {
|
|
e.preventDefault()
|
|
var moveX = e.x, moveY = e.y
|
|
var offsetX = moveX - startX, offsetY = moveY - startY
|
|
|
|
$(".preview_img").style.marginLeft = ` ${offsetX + OldLeft}px`
|
|
$(".preview_img").style.marginTop = `${offsetY + OldTop}px`
|
|
|
|
}
|
|
|
|
|
|
function xuanzhuan() {
|
|
$(".preview_img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |