首页怎么用javascript实现按住鼠标伸出一根棍子

怎么用javascript实现按住鼠标伸出一根棍子

时间: 2023-07-11 12:48:35 浏览: 156

以下是一个简单的 JavaScript 代码实现，可以让用户按住鼠标左键，拖动鼠标时伸出一根棍子： ```html <!DOCTYPE html> <html> <head> <title>伸出棍子</title> <style> body { margin: 0; padding: 0; background-color: #f0f0f0; cursor: crosshair; } #stick { width: 5px; height: 0; background-color: #000000; position: absolute; top: 0; left: 0; transition: height 0.1s ease-out; transform-origin: bottom center; } </style> </head> <body onmousedown="startStick(event)" onmousemove="stretchStick(event)" onmouseup="endStick(event)"> <div id="stick"></div> <script> var stick = document.getElementById("stick"); var startY = 0; var endY = 0; var stretching = false; function startStick(event) { startY = event.clientY; stretching = true; } function stretchStick(event) { if (stretching) { endY = event.clientY; stick.style.height = Math.max(endY - startY, 0) + "px"; } } function endStick(event) { stretching = false; stick.style.height = "0"; } </script> </body> </html> ``` 这个代码使用了事件监听器来实现棍子的伸展和收缩。当用户按下鼠标左键时，会记录当前鼠标的 Y 坐标作为起始点。当用户拖动鼠标时，会根据当前鼠标的 Y 坐标计算出棍子应该伸展的长度，并将棍子的高度设置为这个长度。当用户松开鼠标左键时，棍子会收缩回去。在这个过程中，棍子的高度的变化使用了 CSS 的 transition 属性来实现平滑的动画效果。

阅读全文