找程序员做网站,wordpress 搜索小工具,广东富盈建设有限公司企业网站,网站建设淘宝客模板下载移动色块案例
实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。
移动色块#xff1a;用户可以通过鼠标按住并拖动页面上的红色方块#xff08;#blocks#xff09;。当用户按下鼠标左键时#xff0c;色块开始跟随鼠标的移动而移动#xff1b;当用户释放鼠标左键时…移动色块案例
实现一个可以拖动并且在拖动过程中会自动改变颜色的色块。
移动色块用户可以通过鼠标按住并拖动页面上的红色方块#blocks。当用户按下鼠标左键时色块开始跟随鼠标的移动而移动当用户释放鼠标左键时色块停止移动。显示当前位置随着色块的移动其当前的屏幕坐标相对于浏览器窗口会被实时更新并显示在页面底部左侧的位置显示区域#positionDisplay中。自动变色一旦用户开始拖动色块系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 getRandomColor() 函数生成一个随机的颜色值并使用 updateColor(color) 函数来更新色块的背景颜色和颜色显示区域#colorDisplay中的文本。交互反馈在拖动过程中用户的每一次鼠标移动都会触发色块位置的更新同时如果色块正在被拖动那么颜色也会持续变化直到用户释放鼠标左键为止。
练习JavaScript 事件监听器如 mousedown, mouseup, mousemove与 CSS 样式
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8title移动色块/titlestyle#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/headbodyspan idcolorDisplay当前颜色: #FF0000 /spanspan idpositionDisplay当前位置: (0, 0) /spandiv idblocks/divscript// 获取色块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
/htmljQuery 版本
bodyspan idcolorDisplay当前颜色: #FF0000 /spanspan idpositionDisplay当前位置: (0, 0) /spandiv idblocks/divscript$(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
