基于原生js实现九宫格算法代码实例
九宫格算法核心：
- 利用控件索引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="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的导演处女作</p>
<p>几乎全面启用新演员的做法</p>
</div>
</div>
<script>
window.onload=function(){
var top=document.getElementById("top");
var btns=top.getElementsByTagName("button");
var content=document.getElementById("bottom");
// console.log(content.children);
//console.log(btns);
//定义变量标识盒子的宽度和高度
var cssW=220;
var cssH=360;
var marginXY=15;
//监听按钮点击事件
btns[0].onclick=function(){
getContent(3);
}
btns[1].onclick=function(){
getContent(4)
}
btns[2].onclick=function(){
getContent(5);
}
function getContent(cols){
var cols;
//遍历
for(var i=0;i<content.children.length;i++){
var currentCont=content.children[i];
//console.log(currentCont);
//盒子所在的行
var row=parseInt(i/cols);
//盒子所在的列
var col=parseInt(i%cols);
//console.log("盒子在第" +row+ "行,""在第" +col+ "列");
currentCont.style.position="absolute";
currentCont.style.left=col*(cssW+marginXY)+"px";
currentCont.style.top=row*(cssH+marginXY)+"px";
}
}
}
</script>
</body>
</html>
九宫格（用原生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模仿手机端九宫格登录功能实现代码
最近没有项目做,闲来无事写了一个小demo,特此分享到我们平台,供大家参考下,本文写的不好还请各位大侠见谅! 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: 首先我们先画出两个九宫格,一个用于登录和首次设置滑动密码使用,另个用于再次设置滑动密码,用于与第一次输入的滑动密码进行对比,判断两次密码是否一致 第一个九宫格 $("#gesturepwd").GesturePasswd({ backgroundColor: "#25
-
javascript+canvas制作九宫格小程序
js核心代码 复制代码 代码如下: /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 *gridspace:宫格空隙 *offsetX:x*y宫格相对canvas(0,0)X坐标偏移量 **offsetX:x*y宫格相对canvas(0,0)Y坐标偏移量 *isanimat:是否启用动画显示 */ function ImageGrid(can
-
js实现九宫格图片半透明渐显特效的方法
本文实例讲述了js实现九宫格图片半透明渐显特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>九宫格图片半透明渐显效果</title> <body> <STYLE type=text/css>.invisible { FILTER: alpha(opacity=0) } </STYLE> <SCRIPT language=JavaScript1.2> <!-- f
-
js实现九宫格拼图小游戏
效果如下: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>九宫格拼图</title> <style> *{ padding: 0; margin: 0; border: 0; } /* *是通配符,给所有的元素去掉默认样式,因为有的浏览器会默认加上一些样式,这可能会给布局带来问题 */ body{ width: 100
-
javascript九宫格图片随机打乱位置的实现方法
今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置.一开始在百度查看相关博客,走了很多弯路.最后看了众多的例子,自己写了个方法. <script> //打乱图片方法 function fun(){ var x = []; var y ; for(var i=1;i<10;i++){ var div = document.getElementById("d"+i+""); div.removeChild(document.getElem
-
原生JS实现九宫格抽奖效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w
-
js实现九宫格的随机颜色跳转
效果如下: 图(1) 初始图 图(2) 开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body
-
基于javascript实现九宫格大转盘效果
本文实例为大家分享了js实现幸运抽奖九宫格大转盘效果,供大家参考,具体内容如下 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>九宫格大转盘</title> <style type="text/css"> /*reset*/ *{ padding:0; margin:0} body{ height:
-
基于原生js实现九宫格算法代码实例
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols); 列 col=parseInt(i%cols); i是当前的盒子,cols是总列数, 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
-
基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; this.id = id; this.map = map; this.sPos = sPos; this.ePos = eP
-
基于原生JS封装的Modal对话框插件的示例代码
基于原生JS封装Modal对话框插件,具体内容如下所示: 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ModalPlugin({ //提示的标题信息 title:'系统提示', //内容模板 字符串 /模板字符串/DOM元素对象 template:null, //自定义按钮信息 buttons:[{ //按钮文字 text:'确定', click(){ //this:当前实例 }
-
原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
-
用js实现简单算法的实例代码
一.冒泡排序 var arr1=[3,9,2,7,0,8,4]; for(var i=0;i<arr1.length;i++){ for(var j=i+1;j<arr1.length;j++){ var temp=0; if(arr1[i]>arr1[j]){ temp=arr1[i]; arr1[i]=arr1[j]; arr1[j]=temp; } } } alert(arr1); 二.快速排序 var a=[3,5,0,9,2,7,5]; function quickSort(a
-
Java编程基于快速排序的三个算法题实例代码
快速排序原理简介 快速排序是我们之前学习的冒泡排序的升级,他们都属于交换类排序,都是采用不断的比较和移动来实现排序的.快速排序是一种非常高效的排序算法,它的实现,增大了记录的比较和移动的距离,将关键字较大的记录从前面直接移动到后面,关键字较小的记录从后面直接移动到前面,从而减少了总的比较次数和移动次数.同时采用"分而治之"的思想,把大的拆分为小的,小的拆分为更小的,其原理如下:对于给定的一组记录,选择一个基准元素,通常选择第一个元素或者最后一个元素,通过一趟扫描,将待排序列分成两部分,
-
js图数据结构处理 迪杰斯特拉算法代码实例
这篇文章主要介绍了js图数据结构处理 迪杰斯特拉算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 /*//1.确定数据结构, mapf[i][j] 为点i到点j的距离 [ Infinity 2 5 Infinity Infinity Infinity Infinity 2 6 Infinity Infinity Infinity Infinity 7 1 Infinity Infinity 2 Infinity 4 Infinity
-
基于原生JS实现分页效果的示例代码
这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o
-
原生js中ajax访问的实例详解
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (
-
原生JavaScript实现日历功能代码实例(无引用Jq)
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 成品显示,可左右切换月份 html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi