动态网站建设实例教程网络营销策略案例分析
移动色块案例
实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。
- 移动色块：用户可以通过鼠标按住并拖动页面上的红色方块（
#blocks）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - 显示当前位置：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（
#positionDisplay）中。 - 自动变色：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用
getRandomColor()函数生成一个随机的颜色值，并使用updateColor(color)函数来更新色块的背景颜色和颜色显示区域（#colorDisplay）中的文本。 - 交互反馈：在拖动过程中，用户的每一次鼠标移动都会触发色块位置的更新，同时如果色块正在被拖动，那么颜色也会持续变化，直到用户释放鼠标左键为止。
练习：JavaScript 事件监听器（如 mousedown, mouseup, mousemove）与 CSS 样式
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>移动色块</title><style>#blocks {width: 100px;height: 100px;background-color: #FF0000;border-radius: 2px;position: absolute;cursor: pointer;}#colorDisplay,#positionDisplay {position: absolute;bottom: 0;left: 0;}#positionDisplay {left: 160px;}</style></head><body><span id="colorDisplay">当前颜色: #FF0000 </span><span id="positionDisplay">当前位置: (0, 0) </span><div id="blocks"></div><script>// 获取色块var div = document.getElementById("blocks");// 获取颜色位置显示区域var colorDisplay = document.getElementById("colorDisplay");var positionDisplay = document.getElementById("positionDisplay");var posX, posY, mouseX, mouseY;var dragging = false;// 自动变色定时器变量var colorChangeInterval;// 随机生成颜色function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}// 更新颜色并显示function updateColor(color) {div.style.backgroundColor = color;colorDisplay.textContent = '当前颜色: ' + color;}// 更新位置并显示function updatePosition(left, top) {div.style.left = left + 'px';div.style.top = top + 'px';positionDisplay.textContent = '当前位置: (' + left + ', ' + top + ')';}// 改变颜色function colorChange() {updateColor(getRandomColor());}// mousedown 开始拖拽div.addEventListener('mousedown', function (e) {dragging = true;mouseX = e.clientX;mouseY = e.clientY;posX = parseInt(div.style.left) || 0;posY = parseInt(div.style.top) || 0;e.preventDefault(); // 防止文本选中等默认行为// 开始拖拽时启动定时器if (!colorChangeInterval) {colorChangeInterval = setInterval(colorChange, 300);}});// mouseup 停止拖拽document.addEventListener('mouseup', function (e) {dragging = false;// 停止拖拽时清除定时器if (colorChangeInterval) {clearInterval(colorChangeInterval);colorChangeInterval = null;}});// mousemove 更新位置document.addEventListener('mousemove', function (e) {if (dragging) {var dx = e.clientX - mouseX;var dy = e.clientY - mouseY;var newX = posX + dx;var newY = posY + dy;updatePosition(newX, newY);}});</script></body>
</html>
jQuery 版本
<body><span id="colorDisplay">当前颜色: #FF0000 </span><span id="positionDisplay">当前位置: (0, 0) </span><div id="blocks"></div><script>$(document).ready(function() {var $div = $('#blocks');var $colorDisplay = $('#colorDisplay');var $positionDisplay = $('#positionDisplay');var posX, posY, mouseX, mouseY;var dragging = false;// 自动变色定时器变量var colorChangeInterval;function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}function updateColor(color) {$div.css('backgroundColor', color);$colorDisplay.text('当前颜色: ' + color);}function updatePosition(left, top) {$div.css({left: left + 'px', top: top + 'px'});$positionDisplay.text('当前位置: (' + left + ', ' + top + ')');}function colorChange() {updateColor(getRandomColor());}$div.on('mousedown', function(e) {dragging = true;mouseX = e.clientX;mouseY = e.clientY;posX = parseInt($div.css('left')) || 0;posY = parseInt($div.css('top')) || 0;e.preventDefault();if (!colorChangeInterval) {colorChangeInterval = setInterval(colorChange, 300);}});$(document).on('mouseup', function(e) {dragging = false;if (colorChangeInterval) {clearInterval(colorChangeInterval);colorChangeInterval = null;}});$(document).on('mousemove', function(e) {if (dragging) {var dx = e.clientX - mouseX;var dy = e.clientY - mouseY;var newX = posX + dx;var newY = posY + dy;updatePosition(newX, newY);}});});</script>
</body>