蝙蝠岛资源网 Design By www.hbtsch.com
九宫格算法核心:
- 利用控件索引index计算出控件所在的行数和列数;
- 利用控件计算出left距离;
- 利用控件计算出top距离;
- 写特效时需要用到定位
公式:
行 row=parseInt(i/cols);
列 col=parseInt(i%cols);
i是当前的盒子,cols是总列数,
代码示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九宫格</title> <style> *{ padding: 0; margin: 0; } #top{ margin-top:30px; margin-bottom: 20px; margin-left:20px; } #bottom{ position: relative; } #bottom .content{ width: 220px; height: 360px; background-color: skyblue; margin: 0 0 15px 15px; padding: 5px; } .content img{ width: 220px; height: 308px; } #bottom .content p:last-child{ font-size: 15px; color: red; } </style> </head> <body> <div id="top"> <button>排成三列</button> <button>排成四列</button> <button>排成五列</button> </div> <div id="bottom"> <div class="content"> <img src="/UploadFiles/2021-04-02/dianying.jpg">九宫格(用原生js实现)
1、本文的九宫格是用原生的js实现的;
2、实现的九宫格效果是:可交换1-9的任意方格,且将方格拖拽至大盒子外松开后可自动回到拖拽之前的位置。
3、代码如下:
html代码:
<ul id="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul>css代码:
body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{ margin:0; padding:0; } html { overflow: hidden; } ul { list-style: none; } #box { position: relative; margin: 20px auto; width: 640px; height: 640px; border: 1px solid #eee; } #box li { position: absolute; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 40px; font-weight: bold; background: #eee; } #box .active { z-index: 1; color: #fff; background: blue; }js代码:
window.onload = function () { var oBox = document.getElementById('box'); var aLi = oBox.children; for(var i = 0; i < aLi.length; i++) { // 布局 aLi[i].style.left = 210 * (i % 3) + 10 + 'px'; aLi[i].style.top = 210 * Math.floor(i / 3) + 10 + 'px'; // 添加拖拽功能 aLi[i].index = i; aLi[i].onmousedown = function (ev) { var e = ev || window.event; var iX = e.clientX - this.offsetLeft; var iY = e.clientY - this.offsetTop; if(this.setCapture) { this.setCapture(); } var oThat = this; // 添加class名称 this.className = 'active'; document.onmousemove = function (ev) { var e = ev || window.event; var iL = e.clientX - iX; var iT = e.clientY - iY; oThat.style.left = iL + 'px'; oThat.style.top = iT + 'px'; // 交换位置的条件 for(var j = 0; j < aLi.length; j++) { if(oThat != aLi[j] && oThat.offsetLeft + oThat.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2 && oThat.offsetTop + oThat.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2 && oThat.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2 && oThat.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2) { var iCurIndex = oThat.index; // 交换位置 aLi[j].style.left = 210 * (iCurIndex % 3) + 10 + 'px'; aLi[j].style.top = 210 * Math.floor(iCurIndex / 3) + 10 + 'px'; // 交换下标 oThat.index = aLi[j].index; aLi[j].index = iCurIndex; break; } } }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; if(oThat.releaseCapture) { oThat.releaseCapture(); } // 去掉class名称 oThat.className = ''; // 重置当前拖拽元素的位置 oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px'; oThat.style.top = 210 * Math.floor(oThat.index / 3) + 10 + 'px'; }; return false; }; } };以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,九宫格算法
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无基于原生js实现九宫格算法代码实例的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]