模拟手指翻书的效果
程序员文章站
2024-02-25 22:05:27
...
<html>
<head>
<meta charset="utf-8">
<style>
* {
box-sizing: border-box;
}
</style>
</head>
<body style="padding:300px">
<img id="img" src="1.png" style="width:200px;height:400px" alt="">
<div id="mask" style="position:fixed;width:1000px;height:1000px;overflow: hidden;">
<img id="im" src="1.jpg" style="position:fixed;width:200px;height:400px;display:none" alt="">
</div>
<script>
var book = document.querySelector("#img");
var obj = book.getBoundingClientRect();
var rightX = obj.x + obj.width;
var rightY = obj.y;
var img = document.querySelector("#im");
var mask = document.querySelector("#mask");
var mousedown = false
document.addEventListener("mousedown", function(e) {
mousedown = true
}, false)
document.addEventListener("mouseup", function(e) {
mousedown = false
}, false)
document.addEventListener("mousemove", function(e) {
if (!mousedown) {
return
}
if (window.timer) {
return
}
window.timer = setTimeout(function() {
var mouseX = e.clientX;
var mouseY = e.clientY;
var distance = Math.sqrt(Math.pow((rightY - mouseY), 2) + Math.pow((rightX - mouseX), 2)) / 2
img.style.top = 500 + "px";
img.style.left = 1000 - distance + "px";
img.style.display = "block";
img.style.transformOrigin = "left top";
var deg = Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
img.style.transform = "rotate(" + deg + 45 + "deg)"
mask.style.top = (mouseY - 500 + (rightY - mouseY) / 2) + "px";
mask.style.left = (mouseX - 1000 + (rightX - mouseX) / 2) + "px";
mask.style.transformOrigin = "right center";
mask.style.transform = "rotate(" + deg + "deg)"
console.log(deg)
clearTimeout(window.timer)
window.timer = false;
}, 10)
}, false)
// var book = document.querySelector("#img");
// var obj = book.getBoundingClientRect();
// var rightX = obj.x + obj.width;
// var rightY = obj.y;
// var img = document.querySelector("#im");
// var mask = document.querySelector("#mask");
// document.addEventListener("mousemove", function(e) {
// if (window.timer) {
// return
// }
// window.timer = setTimeout(function() {
// var mouseX = e.clientX;
// var mouseY = e.clientY;
// img.style.top = (mouseY) + "px";
// img.style.left = mouseX + "px";
// img.style.display = "block";
// img.style.transformOrigin = "left top";
// var deg = 2 * Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
// img.style.transform = "rotate(" + deg + "deg)"
// var deg1 = Math.atan((rightY - mouseY) / (rightX - mouseX)) * 180 / Math.PI
// var distance = Math.sqrt(Math.pow((rightY - mouseY), 2) + Math.pow((rightX - mouseX), 2)) / 2
// console.log(distance)
// mask.style.top = (mouseY - 500) + "px";
// mask.style.left = (mouseX - 1000 + distance) + "px";
// mask.style.transformOrigin = "right center";
// mask.style.transform = "rotate(" + deg1 + "deg)"
// clearTimeout(window.timer)
// window.timer = false;
// }, 16)
// }, false)
</script>
</body>
</html>
上一篇: .net读写xml文档详解
下一篇: C语言羁绊之数组长度的求解方式