295 lines
7.4 KiB
HTML
295 lines
7.4 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/font_2576965_p89wlanilpr.css">
|
||
<style>
|
||
body,
|
||
ul,
|
||
li,
|
||
a,
|
||
p,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6 {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.smallImg {
|
||
width: 100px;
|
||
}
|
||
|
||
.zhezhao {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #000;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 998;
|
||
opacity: .5;
|
||
}
|
||
|
||
.preview {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.closed {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 24px;
|
||
color: #fff;
|
||
background-color: #606266;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.action .d {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 44px;
|
||
height: 44px;
|
||
font-size: 24px;
|
||
color: #fff;
|
||
background-color: #606266;
|
||
border-color: #fff;
|
||
position: absolute;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.left {
|
||
left: 40px;
|
||
}
|
||
|
||
.right {
|
||
right: 40px;
|
||
}
|
||
|
||
.operation {
|
||
left: 50%;
|
||
bottom: 30px;
|
||
transform: translateX(-50%);
|
||
width: 282px;
|
||
height: 44px;
|
||
padding: 0 23px;
|
||
background-color: #606266;
|
||
border-color: #fff;
|
||
position: absolute;
|
||
border-radius: 22px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.operation li {}
|
||
|
||
.operation li i {
|
||
font-size: 23px;
|
||
color: #fff;
|
||
}
|
||
|
||
.xz {
|
||
display: inline-block;
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
.mainImg {
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
|
||
<img class="smallImg" src="./img/1.jpg" alt="">
|
||
|
||
<div class="zhezhao"></div>
|
||
<div class="preview">
|
||
<div class="closed">x</div>
|
||
|
||
<div class="action">
|
||
<div class="left d"><</div>
|
||
<div class="right d">></div>
|
||
</div>
|
||
|
||
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;" src="./img/4.jpg" alt="">
|
||
|
||
<ul class="operation">
|
||
<li>
|
||
<i class="iconfont icon-suoxiao suoxiao"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-fangda fangda"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-fullscreen fullscreen"></i>
|
||
</li>
|
||
<li class="xz">
|
||
<i class="iconfont icon-shuaxin leftshuaxin"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-shuaxin rightshuaxin"></i>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
|
||
|
||
<script>
|
||
|
||
var suoxiao = $(".suoxiao"),
|
||
fangda = $(".fangda"),
|
||
fullscreen = $(".fullscreen"),
|
||
leftshuaxin = $(".leftshuaxin"),
|
||
rightshuaxin = $(".rightshuaxin");
|
||
|
||
var x1, y1, l, t;
|
||
|
||
// 当鼠标在图片上按下的时候，修改这个变量为true，
|
||
// 如果鼠标滑动超过图片的区域，因为这个变量未true，
|
||
// 所以if判断通过，给背景层绑定移动事件实现可以继续拖动图片
|
||
|
||
// 当用户在背景层松开鼠标后，将这个变量改为false。
|
||
// 这样当用户在未按下图片但是从图片上滑动超过图片区域的时候，因为这个变量是false
|
||
// 所以不会执行，在背景层滑动鼠标图片也跟着一起移动的事件绑定
|
||
var isBackMove = false;
|
||
|
||
|
||
suoxiao.onclick = function () {
|
||
var value = Scale() - 0.2;
|
||
if (value != 0) {
|
||
$(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
|
||
}
|
||
}
|
||
|
||
fangda.onclick = function () {
|
||
$(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)`
|
||
}
|
||
fullscreen.onclick = function () {
|
||
$(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
|
||
}
|
||
|
||
// -90
|
||
leftshuaxin.onclick = function () {
|
||
xuanzhuan(-90)
|
||
}
|
||
|
||
// +90
|
||
rightshuaxin.onclick = function () {
|
||
xuanzhuan(90)
|
||
}
|
||
|
||
// 鼠标在图片上按下的时候
|
||
$(".mainImg").onmousedown = function (e) {
|
||
console.log("鼠标在图片上按下的时候");
|
||
e.preventDefault()
|
||
|
||
isBackMove = true
|
||
|
||
//获取鼠标按下的坐标
|
||
x1 = e.clientX;
|
||
y1 = e.clientY;
|
||
|
||
l = parseInt($(".mainImg").style.marginLeft);
|
||
t = $(".mainImg").offsetTop;
|
||
|
||
ImgMove(".mainImg")
|
||
|
||
}
|
||
|
||
// 按住拖动，但鼠标从图片上离开的
|
||
// 给背景层绑定鼠标移动事件
|
||
$(".mainImg").onmouseleave = function () {
|
||
console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
|
||
if (isBackMove) {
|
||
ImgMove(".preview")
|
||
}
|
||
|
||
}
|
||
|
||
// 鼠标在图片上松开
|
||
$(".mainImg").onmouseup = function (ev) {
|
||
console.log("鼠标在图片上松开");
|
||
$(".mainImg").onmousemove = null;
|
||
$(".preview").onmousemove = null;
|
||
}
|
||
|
||
// 鼠标在背景层上松开
|
||
$(".preview").onmouseup = function (ev) {
|
||
console.log("鼠标在背景层上松开");
|
||
isBackMove = false
|
||
$(".mainImg").onmousemove = null;
|
||
$(".preview").onmousemove = null;
|
||
}
|
||
|
||
|
||
|
||
function ImgMove(className) {
|
||
$(className).onmousemove = function (ev) {
|
||
var x2 = ev.clientX;
|
||
var y2 = ev.clientY;
|
||
|
||
//计算出鼠标的移动距离
|
||
var x = x2 - x1;
|
||
var y = y2 - y1;
|
||
|
||
//移动的数值与元素的left，top相加，得出元素的移动的距离
|
||
var lt = y + t;
|
||
var ls = x + l;
|
||
|
||
//更改元素的left，top值
|
||
$(".mainImg").style.marginLeft = ls + 'px';
|
||
$(".mainImg").style.marginTop = lt + 'px';
|
||
}
|
||
}
|
||
|
||
// 左右旋转的代码封装
|
||
function xuanzhuan(offset) {
|
||
$(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
|
||
}
|
||
|
||
// 获取缩放
|
||
function Scale() {
|
||
return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
|
||
}
|
||
|
||
// 获取旋转的数值
|
||
function Rotate() {
|
||
return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
|
||
}
|
||
|
||
|
||
function $(a) {
|
||
return document.querySelector(a)
|
||
}
|
||
</script>
|
||
|
||
</html> |