<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.pre_box {
width: 100%;
height: 100vh;
position: relative;
user-select: none;
}
.pre_box .img_box {
position: absolute;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.pre_img {
transition: all .2s;
overflow-clip-margin: content-box;
overflow: clip;
}
.pre_background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .5;
z-index: 998;
}
.pre_img_tool {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
width: 282px;
height: 44px;
padding: 0 23px;
background-color: #606266;
border-color: #fff;
border-radius: 22px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-around;
opacity: .8;
cursor: pointer;
box-sizing: border-box;
user-select: none;
}
.pre_img_tool img {
width: 25px;
}
</style>
</head>
<body>
<!--图片旋转实践-->
<!--作者:Saryz-->
<!--邮箱:a86115592@outlook.com-->
<!--转载请注明出处-->
<div class="pre_box">
<div class="img_box">
<img id="img" class="pre_img" src="./case1.jpg" alt="" draggable="false">
</div>
<div class="pre_background"></div>
<div class="pre_img_tool">
<img src="./1.png" alt="" onclick="decrease()">
<img src="./2.png" alt="" onclick="blewUp()">
<img src="./6.png" alt="" onclick="reset()">
<img src="./4.png" alt="" onclick="left()">
<img src="./3.png" alt="" onclick="right()">
</div>
</div>
</body>
</html>
<script>
var test = document.getElementById('img')
var r = 0
var s = 1
var x = 0
var y = 0
var interval = null
var le = null
var offsetY = 0
var offsetX = 0
test.onload = function () {
console.log('图片加载完成')
}
test.onmousedown = omd
// const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
document.addEventListener('mousewheel', function (e) {
console.log('eee', e.wheelDelta)
if (e.wheelDelta > 0) {
s += .2
} else {
s > .4 && (s -= .2)
}
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
})
function omd(e) {
console.log(e.x, e.y)
test.style.transition = 'none'
var ox = offsetX
var oy = offsetY
function move(ev) {
offsetX = ox + ev.pageX - e.pageX
offsetY = oy + ev.pageY - e.pageY
test.style.marginLeft = offsetX + 'px'
test.style.marginTop = offsetY + 'px'
}
// offsetX = pylx
// offsetY = pyly
window.addEventListener('mousemove', move)
document.addEventListener('mouseup', function () {
console.log('松手了')
window.removeEventListener('mousemove', move)
test.style.transition = 'all .2s'
})
}
function left() {
// r === 270 ? r = 0 : (r += 90)
r -= 90
console.log(r)
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
}
function right() {
r += 90
console.log(r)
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
}
function decrease() {
s > .4 && (s -= .2)
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
}
function blewUp() {
s += .2
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
}
function reset(){
s = 1
test.style.transform = 'scale(' + s + ') rotate(' + r + 'deg)'
offsetX = 0
offsetY = 0
test.style.marginLeft = offsetX + 'px'
test.style.marginTop = offsetY + 'px'
}
</script>
