快捷導(dǎo)航

原生JS生成九宮格

更新時(shí)間：2022年06月28日 15:31:23 作者：猶如幻翳！

這篇文章主要為大家詳細(xì)介紹了原生JS生成九宮格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

原生JS生成九宮格圖片并且實(shí)現(xiàn)圖片互換，供大家參考，具體內(nèi)容如下

解題思路

涉及知識(shí)點(diǎn)，請(qǐng)

1、熟練利用js做出html樣式
2、對(duì)onmousedown,onmousemove,onmouseup等事件熟練組合運(yùn)用
3、熟練掌握事件對(duì)象domobj.offsetLeft,domobj.offsetTop,domobj.offsetWidth，domobj.offsetHeight的知識(shí)點(diǎn)
4、了解事件 e.clientX,e.clientY,e.offsetX,e.offsetY,e.pageX,e.pageY的知識(shí)點(diǎn)
5、理解克隆節(jié)點(diǎn)的原理

<!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.創(chuàng)建3行3列9個(gè)div。并且給每個(gè)div添加隨機(jī)顏色
? ??? ??? ?//以下為表示構(gòu)建思路，利用雙重for循環(huán)
? ??? ??? ?//(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);
? ? ? ? ? ? ? ? //設(shè)置top和left值，注意行對(duì)應(yīng)的是odiv.offsetHeight，列對(duì)應(yīng)的是odiv.offsetWidth
? ? ? ? ? ? ? ? odiv.style.top = i * (odiv.offsetHeight + 10) + 'px';
? ? ? ? ? ? ? ? odiv.style.left = j * (odiv.offsetWidth + 10) + 'px';
? ? ? ? ? ? ? ? //獲取隨機(jī)顏色，用的rgb隨機(jī)獲取方式
? ? ? ? ? ? ? ? odiv.style.backgroundColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256)
? ? ? ? ? ? ? ? ?+ ','+ Math.floor(Math.random() * 256) + ')';
? ? ? ? ? ? ? ? //給每個(gè)圖片標(biāo)上號(hào)碼，i,j最大值為3，但是共執(zhí)行了9次，設(shè)置變量count=0,count++作為數(shù)組的索引把對(duì)應(yīng)的內(nèi)容添加到div上
? ? ? ? ? ? ? ? odiv.innerText = chart[count++];
? ? ? ? ? ? }
? ? ? ? }
?? ?
?? ??? ?//3.獲取循環(huán)中創(chuàng)建的9個(gè)div,并添加點(diǎn)擊鼠標(biāo)事件
? ? ? ? var items = wrap.children
? ? ? ? for (var i = 0; i < items.length; i++) {
? ? ? ? ? ? items[i].onmousedown = function (e) {
? ? ? ? ? ? ? ? var evt = e || event;
? ? ? ? ? ? ? ? //獲取鼠標(biāo)點(diǎn)下相對(duì)于事件源的偏移量
? ? ? ? ? ? ? ? var x = evt.offsetX;
? ? ? ? ? ? ? ? var y = evt.offsetY;
? ? ? ? ? ? ? ? //this指向鼠標(biāo)點(diǎn)擊要拖拽的對(duì)象
? ? ? ? ? ? ? ? var dragitem = this;
? ? ? ? ? ? ? ? //克隆點(diǎn)擊拖拽的對(duì)象。注意此時(shí)解釋可能有點(diǎn)抽象，但是解題關(guān)鍵，克隆對(duì)象后相當(dāng)于除了上述9個(gè)事件，
? ? ? ? ? ? ? ? //又生成了一個(gè)隱藏的和點(diǎn)擊的div相同的對(duì)象，把克隆的對(duì)象替換掉剛點(diǎn)擊時(shí)的即將拖拽的對(duì)象，此時(shí)拖
? ? ? ? ? ? ? ? //拽對(duì)象被隱藏，脫離父元素，此時(shí)需要把拖拽的對(duì)象添加到父元素的最后，使其重新為10個(gè)子元素，否則拖拽的元素?zé)o法顯示。
? ? ? ? ? ? ? ? var clonenode = dragitem.cloneNode();
? ? ? ? ? ? ? ? wrap.replaceChild(clonenode, dragitem);
? ? ? ? ? ? ? ? //把拖拽的節(jié)點(diǎn)放到wrap的最后
? ? ? ? ? ? ? ? wrap.appendChild(dragitem);
? ? ? ? ? ? ? ? //拖拽時(shí)把拖拽的層次向上調(diào)一下，否則會(huì)被覆蓋。
? ? ? ? ? ? ? ? dragitem.style.zIndex = 1;

? ? ? ? ? ? ? ? //4，此時(shí)鼠標(biāo)點(diǎn)擊時(shí)需要準(zhǔn)備的工作已經(jīng)做完了，因?yàn)橥献髽?biāo)時(shí)，拖拽對(duì)象時(shí)再文檔上移動(dòng)的，此時(shí)鼠標(biāo)移動(dòng)的對(duì)象應(yīng)為document
? ? ? ? ? ? ? ? document.onmousemove = function (e) {
? ? ? ? ? ? ? ? ? ? var evt = e || event;
? ? ? ? ? ? ? ? ? ? //獲取拖拽對(duì)象跟隨鼠標(biāo)時(shí)在文檔中的定位，事件源據(jù)文檔的邊距-點(diǎn)擊時(shí)距離事件源的偏移=定位的坐標(biāo)
? ? ? ? ? ? ? ? ? ? var x1 = evt.clientX - x;
? ? ? ? ? ? ? ? ? ? var y1 = evt.clientY - y;
? ? ? ? ? ? ? ? ? ? dragitem.style.left = x1 + 'px';
? ? ? ? ? ? ? ? ? ? dragitem.style.top = y1 + 'px';
? ? ? ? ? ? ? ? ? ? //取消默認(rèn)行為
? ? ? ? ? ? ? ? ? ? return false;v
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //5，有拖拽對(duì)象的定位，此時(shí)需要判斷鼠標(biāo)松開時(shí)距離哪個(gè)創(chuàng)建的哪個(gè)div距離最近，交換其距離。上面提到，此時(shí)共創(chuàng)建了10個(gè)Div,
? ? ? ? ? ? ? ? //分別求出拖拽對(duì)象和其他10個(gè)div的距離傳到數(shù)組中，找出最小值對(duì)應(yīng)的索引，該索引對(duì)應(yīng)的div即為距離最近的div,然后交換兩者的
? ? ? ? ? ? ? ? //位置（注意：觀察數(shù)組，最后一個(gè)為0，且上面已經(jīng)把拖拽對(duì)象放到最后，是自己和自己比，因此循環(huán)時(shí)減一即可忽略和自己的比較）
? ? ? ? ? ? ? ? document.onmouseup = function () {
? ? ? ? ? ? ? ? ? ? var arr = [];
? ? ? ? ? ? ? ? ? ? //循環(huán)長(zhǎng)度-1，忽略和自己的比較
? ? ? ? ? ? ? ? ? ? for (var j = 0; j < items.length - 1; j++) {
? ? ? ? ? ? ? ? ? ? //利用勾股定理求距離，并傳入數(shù)組
? ? ? ? ? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? //利用展開符...展開數(shù)組，用Math.min找出最小值，再用最小值去找出數(shù)組對(duì)應(yīng)索引
? ? ? ? ? ? ? ? ? ? var min = Math.min(...arr);
? ? ? ? ? ? ? ? ? ? var dex = arr.indexOf(min);
? ? ? ? ? ? ? ? ? ? //把拖拽對(duì)象的定位換成距離最近div的距離
? ? ? ? ? ? ? ? ? ? dragitem.style.left = items[dex].style.left;
? ? ? ? ? ? ? ? ? ? dragitem.style.top = items[dex].style.top;
? ? ? ? ? ? ? ? ? ? //然后把距離最近的div的定位換成此時(shí)克隆對(duì)象的定位（即原拖拽對(duì)象的定位）
? ? ? ? ? ? ? ? ? ? items[dex].style.left = clonenode.style.left;
? ? ? ? ? ? ? ? ? ? items[dex].style.top = clonenode.style.top;
? ? ? ? ? ? ? ? ? ? //此時(shí)交換完畢，把克隆節(jié)點(diǎn)移除
? ? ? ? ? ? ? ? ? ? wrap.removeChild(clonenode)
? ? ? ? ? ? ? ? ? ? //移除事件并取消默認(rèn)行為
? ? ? ? ? ? ? ? ? ? document.onmousemove = '';
? ? ? ? ? ? ? ? ? ? document.onmouseup = '';
? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: