如何用原生JS编写一个生成九宫格的动态效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1475个文字，预计阅读时间需要6分钟。
原生JS生成九宫格图片并实现图片互换，提供参考内容，包括：
1.解题思路
2.涉及知识点
3.实践利用JS制作HTML样式
4.练习使用onmousedown、onmousemove、onmouseup等事件组合应用
1. 解题思路
- 使用原生JS创建一个九宫格布局。- 为每个格子绑定点击事件，实现图片互换功能。- 使用CSS样式调整布局和视觉效果。2. 涉及知识点- HTML结构：创建九宫格布局。- CSS样式：设置九宫格样式，包括大小、间距等。- JavaScript事件处理：使用点击事件实现图片互换。- DOM操作：动态修改DOM元素的内容。
3. 实践利用JS制作HTML样式
css#grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
.grid-item { width: 100px; height: 100px; overflow: hidden;}
.grid-item img { width: 100%; height: 100%; object-fit: cover;}
4. 练习使用onmousedown、onmousemove、onmouseup等事件组合应用javascriptdocument.addEventListener('DOMContentLoaded', function() { const gridItems=document.querySelectorAll('.grid-item'); let activeItem=null;
gridItems.forEach(item=> { item.addEventListener('mousedown', function() { activeItem=item; item.style.outline='2px solid red'; });
item.addEventListener('mouseup', function() { if (activeItem) { activeItem.style.outline='none'; activeItem=null; } });
item.addEventListener('mousemove', function(e) { if (activeItem && e.buttons===1) { const rect=activeItem.getBoundingClientRect(); const x=e.clientX - rect.left; const y=e.clientY - rect.top; activeItem.style.transform=`translate(${x}px, ${y}px)`; } }); });});
原生JS生成九宫格图片并且实现图片互换，供大家参考，具体内容如下
解题思路
涉及知识点，请
1、熟练利用js做出html样式
2、对onmousedown,onmousemove,onmouseup等事件熟练组合运用
3、熟练掌握事件对象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知识点
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知识点
5、理解克隆节点的原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; padding: 0; } #wrap { position: relative; } #wrap div { width: 100px; height: 100px; position: absolute; text-align: center; line-height: 100px; font-size: 50px; } </style> </head> <body> <div id="wrap"> </div> <script> // 1.获取warp var wrap = document.querySelector('#wrap') //2.创建3行3列9个div。并且给每个div添加随机颜色 //以下为表示构建思路，利用双重for循环 //(0,0) (110,0) (220,0) //(0,110)(110,110)(220,110) //(0,220)(110,220)(220,220) var count = 0 var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9] for (var i = 0; i < 3; i++) {//行 for (var j = 0; j < 3; j++) {//列 var odiv = document.createElement('div'); wrap.appendChild(odiv); //设置top和left值，注意行对应的是odiv.offsetHeight，列对应的是odiv.offsetWidth odiv.style.top = i * (odiv.offsetHeight + 10) + 'px'; odiv.style.left = j * (odiv.offsetWidth + 10) + 'px'; //获取随机颜色，用的rgb随机获取方式 odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ','+ Math.floor(Math.random() * 256) + ')'; //给每个图片标上号码，i,j最大值为3，但是共执行了9次，设置变量count=0,count++作为数组的索引把对应的内容添加到div上 odiv.innerText = chart[count++]; } } //3.获取循环中创建的9个div,并添加点击鼠标事件 var items = wrap.children for (var i = 0; i < items.length; i++) { items[i].onmousedown = function (e) { var evt = e || event; //获取鼠标点下相对于事件源的偏移量 var x = evt.offsetX; var y = evt.offsetY; //this指向鼠标点击要拖拽的对象 var dragitem = this; //克隆点击拖拽的对象。注意此时解释可能有点抽象，但是解题关键，克隆对象后相当于除了上述9个事件， //又生成了一个隐藏的和点击的div相同的对象，把克隆的对象替换掉刚点击时的即将拖拽的对象，此时拖 //拽对象被隐藏，脱离父元素，此时需要把拖拽的对象添加到父元素的最后，使其重新为10个子元素，否则拖拽的元素无法显示。 var clonenode = dragitem.cloneNode(); wrap.replaceChild(clonenode, dragitem); //把拖拽的节点放到wrap的最后 wrap.appendChild(dragitem); //拖拽时把拖拽的层次向上调一下，否则会被覆盖。 dragitem.style.zIndex = 1; //4，此时鼠标点击时需要准备的工作已经做完了，因为拖拽鼠标时，拖拽对象时再文档上移动的，此时鼠标移动的对象应为document document.onmousemove = function (e) { var evt = e || event; //获取拖拽对象跟随鼠标时在文档中的定位，事件源据文档的边距-点击时距离事件源的偏移=定位的坐标 var x1 = evt.clientX - x; var y1 = evt.clientY - y; dragitem.style.left = x1 + 'px'; dragitem.style.top = y1 + 'px'; //取消默认行为 return false;v } //5，有拖拽对象的定位，此时需要判断鼠标松开时距离哪个创建的哪个div距离最近，交换其距离。上面提到，此时共创建了10个Div, //分别求出拖拽对象和其他10个div的距离传到数组中，找出最小值对应的索引，该索引对应的div即为距离最近的div,然后交换两者的 //位置（注意：观察数组，最后一个为0，且上面已经把拖拽对象放到最后，是自己和自己比，因此循环时减一即可忽略和自己的比较） document.onmouseup = function () { var arr = []; //循环长度-1，忽略和自己的比较 for (var j = 0; j < items.length - 1; j++) { //利用勾股定理求距离，并传入数组 var disx = dragitem.offsetLeft - items[j].offsetLeft; var disy = dragitem.offsetTop - items[j].offsetTop; var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2)) arr.push(dissum); } //利用展开符...展开数组，用Math.min找出最小值，再用最小值去找出数组对应索引 var min = Math.min(...arr); var dex = arr.indexOf(min); //把拖拽对象的定位换成距离最近div的距离 dragitem.style.left = items[dex].style.left; dragitem.style.top = items[dex].style.top; //然后把距离最近的div的定位换成此时克隆对象的定位（即原拖拽对象的定位） items[dex].style.left = clonenode.style.left; items[dex].style.top = clonenode.style.top; //此时交换完毕，把克隆节点移除 wrap.removeChild(clonenode) //移除事件并取消默认行为 document.onmousemove = ''; document.onmouseup = ''; return false; } } } </script> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
本文共计1475个文字，预计阅读时间需要6分钟。
原生JS生成九宫格图片并实现图片互换，提供参考内容，包括：
1.解题思路
2.涉及知识点
3.实践利用JS制作HTML样式
4.练习使用onmousedown、onmousemove、onmouseup等事件组合应用
1. 解题思路
- 使用原生JS创建一个九宫格布局。- 为每个格子绑定点击事件，实现图片互换功能。- 使用CSS样式调整布局和视觉效果。2. 涉及知识点- HTML结构：创建九宫格布局。- CSS样式：设置九宫格样式，包括大小、间距等。- JavaScript事件处理：使用点击事件实现图片互换。- DOM操作：动态修改DOM元素的内容。
3. 实践利用JS制作HTML样式
css#grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;}
.grid-item { width: 100px; height: 100px; overflow: hidden;}
.grid-item img { width: 100%; height: 100%; object-fit: cover;}
4. 练习使用onmousedown、onmousemove、onmouseup等事件组合应用javascriptdocument.addEventListener('DOMContentLoaded', function() { const gridItems=document.querySelectorAll('.grid-item'); let activeItem=null;
gridItems.forEach(item=> { item.addEventListener('mousedown', function() { activeItem=item; item.style.outline='2px solid red'; });
item.addEventListener('mouseup', function() { if (activeItem) { activeItem.style.outline='none'; activeItem=null; } });
item.addEventListener('mousemove', function(e) { if (activeItem && e.buttons===1) { const rect=activeItem.getBoundingClientRect(); const x=e.clientX - rect.left; const y=e.clientY - rect.top; activeItem.style.transform=`translate(${x}px, ${y}px)`; } }); });});
原生JS生成九宫格图片并且实现图片互换，供大家参考，具体内容如下
解题思路
涉及知识点，请
1、熟练利用js做出html样式
2、对onmousedown,onmousemove,onmouseup等事件熟练组合运用
3、熟练掌握事件对象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知识点
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知识点
5、理解克隆节点的原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { margin: 0; padding: 0; } #wrap { position: relative; } #wrap div { width: 100px; height: 100px; position: absolute; text-align: center; line-height: 100px; font-size: 50px; } </style> </head> <body> <div id="wrap"> </div> <script> // 1.获取warp var wrap = document.querySelector('#wrap') //2.创建3行3列9个div。并且给每个div添加随机颜色 //以下为表示构建思路，利用双重for循环 //(0,0) (110,0) (220,0) //(0,110)(110,110)(220,110) //(0,220)(110,220)(220,220) var count = 0 var chart = [1, 2, 3, 4, 5, 6, 7, 8, 9] for (var i = 0; i < 3; i++) {//行 for (var j = 0; j < 3; j++) {//列 var odiv = document.createElement('div'); wrap.appendChild(odiv); //设置top和left值，注意行对应的是odiv.offsetHeight，列对应的是odiv.offsetWidth odiv.style.top = i * (odiv.offsetHeight + 10) + 'px'; odiv.style.left = j * (odiv.offsetWidth + 10) + 'px'; //获取随机颜色，用的rgb随机获取方式 odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ','+ Math.floor(Math.random() * 256) + ')'; //给每个图片标上号码，i,j最大值为3，但是共执行了9次，设置变量count=0,count++作为数组的索引把对应的内容添加到div上 odiv.innerText = chart[count++]; } } //3.获取循环中创建的9个div,并添加点击鼠标事件 var items = wrap.children for (var i = 0; i < items.length; i++) { items[i].onmousedown = function (e) { var evt = e || event; //获取鼠标点下相对于事件源的偏移量 var x = evt.offsetX; var y = evt.offsetY; //this指向鼠标点击要拖拽的对象 var dragitem = this; //克隆点击拖拽的对象。注意此时解释可能有点抽象，但是解题关键，克隆对象后相当于除了上述9个事件， //又生成了一个隐藏的和点击的div相同的对象，把克隆的对象替换掉刚点击时的即将拖拽的对象，此时拖 //拽对象被隐藏，脱离父元素，此时需要把拖拽的对象添加到父元素的最后，使其重新为10个子元素，否则拖拽的元素无法显示。 var clonenode = dragitem.cloneNode(); wrap.replaceChild(clonenode, dragitem); //把拖拽的节点放到wrap的最后 wrap.appendChild(dragitem); //拖拽时把拖拽的层次向上调一下，否则会被覆盖。 dragitem.style.zIndex = 1; //4，此时鼠标点击时需要准备的工作已经做完了，因为拖拽鼠标时，拖拽对象时再文档上移动的，此时鼠标移动的对象应为document document.onmousemove = function (e) { var evt = e || event; //获取拖拽对象跟随鼠标时在文档中的定位，事件源据文档的边距-点击时距离事件源的偏移=定位的坐标 var x1 = evt.clientX - x; var y1 = evt.clientY - y; dragitem.style.left = x1 + 'px'; dragitem.style.top = y1 + 'px'; //取消默认行为 return false;v } //5，有拖拽对象的定位，此时需要判断鼠标松开时距离哪个创建的哪个div距离最近，交换其距离。上面提到，此时共创建了10个Div, //分别求出拖拽对象和其他10个div的距离传到数组中，找出最小值对应的索引，该索引对应的div即为距离最近的div,然后交换两者的 //位置（注意：观察数组，最后一个为0，且上面已经把拖拽对象放到最后，是自己和自己比，因此循环时减一即可忽略和自己的比较） document.onmouseup = function () { var arr = []; //循环长度-1，忽略和自己的比较 for (var j = 0; j < items.length - 1; j++) { //利用勾股定理求距离，并传入数组 var disx = dragitem.offsetLeft - items[j].offsetLeft; var disy = dragitem.offsetTop - items[j].offsetTop; var dissum = Math.sqrt(Math.pow(disx, 2) + Math.pow(disy, 2)) arr.push(dissum); } //利用展开符...展开数组，用Math.min找出最小值，再用最小值去找出数组对应索引 var min = Math.min(...arr); var dex = arr.indexOf(min); //把拖拽对象的定位换成距离最近div的距离 dragitem.style.left = items[dex].style.left; dragitem.style.top = items[dex].style.top; //然后把距离最近的div的定位换成此时克隆对象的定位（即原拖拽对象的定位） items[dex].style.left = clonenode.style.left; items[dex].style.top = clonenode.style.top; //此时交换完毕，把克隆节点移除 wrap.removeChild(clonenode) //移除事件并取消默认行为 document.onmousemove = ''; document.onmouseup = ''; return false; } } } </script> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。