<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>移动和缩放示例</title>
<style>
body {
margin: 0;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 500px;
background-color: #a8b1f4;
overflow: hidden;
}
.inner {
background-color: #faf8a3;
width: 180px;
height: 320px;
}
.tip p {
margin-bottom: 0;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="tip">
<p>要体验元素移动、收缩效果请按如下提示操作:</p>
<p>1、触控板:双指轻抚、双指收缩和放大,</p>
<p>2、鼠标:滑动滚轮、按住ctrl键再滑动滚轮</p>
</div>
<script>
(() => {
const wrapper = document.querySelector('.wrapper')
const inner = wrapper.querySelector('.inner')
let offset = { x: 0, y: 0 }
let scale = 1
wrapper.addEventListener('mousewheel', e => {
e.preventDefault()
let deltaX = 0, deltaY = 0
deltaX = e.deltaX
// if (e.deltaX < 0) { console.log('向左') }
// if (e.deltaX > 0) { console.log('向右') }
if (e.ctrlKey) {
if (e.deltaY > 0) {
// console.log('向内')
if (scale <= 0.5) {
scale = 0.5
} else {
scale -= 0.05
}
}
if (e.deltaY < 0) {
// console.log('向外')
if (scale >= 3) {
scale = 3
} else {
scale += 0.05
}
}
} else {
deltaY = e.deltaY
// if (e.deltaY > 0) { console.log('向下') }
// if (e.deltaY < 0) { console.log('向上') }
}
offset = {
x: offset.x - deltaX,
y: offset.y - deltaY
}
inner.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offset.x}, ${offset.y})`
})
})()
</script>
</body>
</html>
@move-scale.html
0