158 lines
5.5 KiB
HTML
158 lines
5.5 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="./preview.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="list">
|
|
<img src="https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg" alt="">
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script>
|
|
var list_img = _(".list img");
|
|
var scaleNum = 1, rotateNum = 0;
|
|
var startX = null, startY = null, oldLeft = null, oldTop = null;
|
|
|
|
var MoveStatus = false;//是否触发事件
|
|
|
|
//js生成页面
|
|
list_img.forEach(v => {
|
|
v.onclick = () => {
|
|
// preview.style.display = "block"
|
|
$("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;" 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_list">
|
|
<i class="iconfont icon-suoxiao"></i>
|
|
<i class="iconfont icon-fangda"></i>
|
|
<i class="iconfont icon-quanping qp"></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
|
|
revolve()
|
|
}
|
|
$(".icon-fangda").onclick = () => {
|
|
scaleNum += 0.2
|
|
revolve()
|
|
}
|
|
$(".left").onclick = () => {
|
|
rotateNum -= 90
|
|
revolve()
|
|
}
|
|
$(".right").onclick = () => {
|
|
rotateNum += 90
|
|
revolve()
|
|
}
|
|
//图标切换
|
|
$(".icon-quanping").onclick = () => {
|
|
//contains() 方法用于判断字符串中是否包含指定的字符或字符串。
|
|
if ($(".qp").classList.contains("icon-quanping")) {
|
|
//全屏替换为1:1
|
|
$(".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();//事件冒泡
|
|
startX = e.x;
|
|
startY = e.y;
|
|
|
|
//console.log(startX,startY);
|
|
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) {
|
|
// console.log("preview");
|
|
|
|
$(".preview").onmousemove = (e) => {
|
|
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 revolve() {
|
|
$(".preview img").style.transform = `scale(${scaleNum}) rotate(${rotateNum}deg)`
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className)
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className)
|
|
}
|
|
</script>
|
|
|
|
</html> |