快捷導(dǎo)航

原生JS生成九宮格

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

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

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

解題思路

涉及知識點，請

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、理解克隆節(jié)點的原理

<!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個div。并且給每個div添加隨機顏色
? ??? ??? ?//以下為表示構(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值，注意行對應(yīng)的是odiv.offsetHeight，列對應(yīng)的是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，但是共執(zhí)行了9次，設(shè)置變量count=0,count++作為數(shù)組的索引把對應(yīng)的內(nèi)容添加到div上
? ? ? ? ? ? ? ? odiv.innerText = chart[count++];
? ? ? ? ? ? }
? ? ? ? }
?? ?
?? ??? ?//3.獲取循環(huán)中創(chuàng)建的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;
? ? ? ? ? ? ? ? //克隆點擊拖拽的對象。注意此時解釋可能有點抽象，但是解題關(guān)鍵，克隆對象后相當(dāng)于除了上述9個事件，
? ? ? ? ? ? ? ? //又生成了一個隱藏的和點擊的div相同的對象，把克隆的對象替換掉剛點擊時的即將拖拽的對象，此時拖
? ? ? ? ? ? ? ? //拽對象被隱藏，脫離父元素，此時需要把拖拽的對象添加到父元素的最后，使其重新為10個子元素，否則拖拽的元素?zé)o法顯示。
? ? ? ? ? ? ? ? var clonenode = dragitem.cloneNode();
? ? ? ? ? ? ? ? wrap.replaceChild(clonenode, dragitem);
? ? ? ? ? ? ? ? //把拖拽的節(jié)點放到wrap的最后
? ? ? ? ? ? ? ? wrap.appendChild(dragitem);
? ? ? ? ? ? ? ? //拖拽時把拖拽的層次向上調(diào)一下，否則會被覆蓋。
? ? ? ? ? ? ? ? dragitem.style.zIndex = 1;

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

</html>

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

您可能感興趣的文章: