公安备案交互式网站/网络推广计划方案
文章目录
- 前言
- 一、效果展示
- 二、代码与思路
- 1.代码
- 2.思路
- 后续展望
前言
作者是一个JavaScript新手，偶尔想到一些有趣的小案例分享
一、效果展示
可以利用鼠标拖动舞台中的方块，松开鼠标时方块会按照二次方的速度（简单的物理公式x=x0-1/2×gt2）降落
二、代码与思路
1.代码
代码如下：
<!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>Document</title><style>* {margin: 0;padding: 0;}.room {position: relative;width: 100%;height: 600px;background-color: white;box-shadow: 0 -5px 5px #bbbbbb inset;;}.box {position: absolute;width: 80px;height: 60px;background-color: #111;}</style>
</head><body><div class="room"><div class="box"></div></div><script>var flag = 0;let room = document.querySelector('.room');let box = document.querySelector('.box');var mx = 0;var my = 0;box.style.left = 100 + 'px';box.style.top = 100 + 'px';room.style.width = window.innerWidth + 'px';function animate(obj) {var k = 0.01;var timer = setInterval(function () {let y = parseInt(obj.style.top);if (y + 9.8 * k * k > 540) {obj.style.top = 540 + 'px';}else {obj.style.top = y + 9.8 * k * k + 'px';}k = k + 0.015;room.style.width = window.innerWidth + 'px';if (y >= 540 || flag == 1) {clearInterval(timer);}// console.log(k + "," + y)}, 10);}//鼠标点击移动事件box.addEventListener('mousedown', function (e) {room.style.width = window.innerWidth + 'px';let x = e.clientX;let y = e.clientY;let Ox = e.offsetX;let Oy = e.offsetY;box.style.left = x - Ox + 'px';box.style.top = y - Oy + 'px';flag = 1;mx = e.offsetX;my = e.offsetY;});//利用父级元素，防止鼠标移动过快而脱离目标room.addEventListener('mousemove', function (e) {if (flag > 0) {let x = e.clientX;let y = e.clientY;if (e.clientX < mx) {x = mx;}else if (e.clientX > window.innerWidth - 80 + mx) {x = window.innerWidth - 80 + mx;console.log(x)}else { }if (e.clientY < my) {y = my;}else if (e.clientY > 540 + my) {y = 540 + my;}else { }let Ox = mx;let Oy = my;box.style.left = x - Ox + 'px';box.style.top = y - Oy + 'px';// console.log(x + "," + y + "," + Ox + "," + Oy)// console.log(window.innerWidth)}});//利用文档脱离移动document.addEventListener('mouseup', function (e) {flag = 0;animate(box);});</script>
</body></html>
2.思路
有两个块元素组成，分别是背景和小方块。
为了限制小方块的拖动范围，增加了判断语句
if (flag > 0) {let x = e.clientX;let y = e.clientY;if (e.clientX < mx) {x = mx;}else if (e.clientX > window.innerWidth - 80 + mx) {x = window.innerWidth - 80 + mx;console.log(x)}else { }if (e.clientY < my) {y = my;}else if (e.clientY > 540 + my) {y = 540 + my;}else { }
重力部分才用到了定时器，于鼠标松开后调用，于鼠标按下时清除定时器。
function animate(obj) {var k = 0.01;var timer = setInterval(function () {let y = parseInt(obj.style.top);if (y + 9.8 * k * k > 540) {obj.style.top = 540 + 'px';}else {obj.style.top = y + 9.8 * k * k + 'px';}k = k + 0.015;room.style.width = window.innerWidth + 'px';if (y >= 540 || flag == 1) {clearInterval(timer);}// console.log(k + "," + y)}, 10);}最重要的，设立变量flag，flag=1时为按下鼠标状态，flag=0时为松开鼠标状态，以便于鼠标按下、鼠标移动、鼠标松开、方块掉落四个动作之间切换。
后续展望
想到了愤怒的小鸟，或许可以利用类似的重力原理实现该游戏。