鼠标跟随效果

.mouse-container{

background: #000;

width: 800px;

margin:20px auto;

}

table > tr > td {

color:transparent;

width: 40px;

height: 40px;

border: 1px solid #000;

}

.border{

border: 1px solid #fff;

background: #333;

}

.border-gray-top{

border: 1px solid #aaa;

border-top: 1px solid #000;

background: #222;

}

.border-gray-bottom{

border: 1px solid #aaa;

border-bottom: 1px solid #000;

background: #222;

}

.border-gray-left{

border: 1px solid #aaa;

border-left: 1px solid #000;

background: #222;

}

.border-gray-right{

border: 1px solid #aaa;

border-right: 1px solid #000;

background: #222;

}

.border-top-left{

border-top: 1px solid #666;

border-left: 1px solid #666;

}

.border-top-right{

border-top: 1px solid #666;

border-right: 1px solid #666;

}

.border-bottom-left{

border-bottom: 1px solid #666;

border-left: 1px solid #666;

}

.border-bottom-right{

border-bottom: 1px solid #666;

border-right: 1px solid #666;

}

const container = document.getElementsByClassName("mouse-container")[0];

const table = document.createElement("table");

for (let i = 0; i < 20; i++) {

const tr = document.createElement("tr");

for (let j = 0; j < 20; j++) {

const td = document.createElement("td");

td.classList.add(`${i}-${j}`);

td.innerHTML = `${i}-${j}`;

tr.appendChild(td);

td.addEventListener("mouseleave",(e)=>{

if(e.target.nodeName.toLowerCase()==="td"){

e.target.classList.remove("border");

const [xAxis,yAxis] = e.target.innerHTML.split("-");

if(xAxis-1>=0){

const topTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis}`)[0];

topTarget.classList.remove("border-gray-top");

}

if(xAxis*1<19){

const bottomTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis}`)[0];

bottomTarget.classList.remove("border-gray-bottom");

}

if(yAxis-1>=0){

const leftTarget = document.getElementsByClassName(`${xAxis}-${yAxis-1}`)[0];

leftTarget.classList.remove("border-gray-left");

}

if(yAxis*1<19){

const rightTarget = document.getElementsByClassName(`${xAxis}-${yAxis*1+1}`)[0];

rightTarget.classList.remove("border-gray-right");

}

if(xAxis-1>=0 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis-1}`)[0];

topLeftTarget.classList.remove("border-bottom-right");

}

if(xAxis*1<19 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis-1}`)[0];

topLeftTarget.classList.remove("border-top-right");

}

if(xAxis-1>=0 && yAxis*1<19){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis*1+1}`)[0];

topLeftTarget.classList.remove("border-bottom-left");

}

if(xAxis*1<19 && yAxis*1<19){

const bottomRightTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis*1+1}`)[0];

bottomRightTarget.classList.remove("border-top-left");

}

}

})

}

table.appendChild(tr);

}

container.appendChild(table);

table.addEventListener("mousemove",(e)=>{

if(e.target.nodeName.toLowerCase()==="td"){

e.target.classList.add("border");

const [xAxis,yAxis] = e.target.innerHTML.split("-");

if(xAxis-1>=0){

const topTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis}`)[0];

topTarget.classList.add("border-gray-top");

}

if(xAxis*1<19){

const bottomTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis}`)[0];

bottomTarget.classList.add("border-gray-bottom");

}

if(yAxis-1>=0){

const leftTarget = document.getElementsByClassName(`${xAxis}-${yAxis-1}`)[0];

leftTarget.classList.add("border-gray-left");

}

if(yAxis*1<19){

const rightTarget = document.getElementsByClassName(`${xAxis}-${yAxis*1+1}`)[0];

rightTarget.classList.add("border-gray-right");

}

if(xAxis-1>=0 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis-1}`)[0];

topLeftTarget.classList.add("border-bottom-right");

}

if(xAxis*1<19 && yAxis-1>=0){

const topLeftTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis-1}`)[0];

topLeftTarget.classList.add("border-top-right");

}

if(xAxis-1>=0 && yAxis*1<19){

const topLeftTarget = document.getElementsByClassName(`${xAxis-1}-${yAxis*1+1}`)[0];

topLeftTarget.classList.add("border-bottom-left");

}

if(xAxis*1<19 && yAxis*1<19){

const bottomRightTarget = document.getElementsByClassName(`${xAxis*1+1}-${yAxis*1+1}`)[0];

bottomRightTarget.classList.add("border-top-left");

}

}

});

// container.innerHTML = "看看我在哪儿"

一键复制

编辑

Web IDE

原始数据

按行查看

历史