原生JS实现九宫格拼图
实现这个案例,需要考虑到鼠标的拖拽效果(onmousedown/onmousemove/mouseup)
拖拽分解:
按下鼠标---->移动鼠标----->松开鼠标
1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键
2.当onmousedown事件发生后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变元素的位置
3.在onmousemove事件中,设定目标元素的left和top
公式:
目标元素的left = 鼠标的clienX - (鼠标和元素的横坐标差,即offsetX)
目标元素的top = 鼠标的clientY -(鼠标和元素的纵坐标差,即offsetY)
4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽效果,在onmouseup事件中,取消document的onmousemove事件即可
当然这个小案例也用到了关于DOM元素系列的操作,对于新手而言,算一个很好的综合训练
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>九宫格</title>
<style>
#box {
height: 300px;
width: 300px;
position: relative;
background-color: brown;
margin: 10px auto;
} span {
width: 100px;
height: 100px;
position: absolute;
font-size: 50px;
text-align: center;
line-height: 100px;
color: #FFF;
user-select: none;
cursor: pointer;
font-weight: bolder;
} #one {
top: 0;
left: 0;
background: url(./5.jpg);
background-size: 100% 100%;
} #two {
top: 0;
left: 100px;
background: url(./7.jpg);
background-size: 100% 100%;
} #three {
top: 0;
left: 200px;
background: url(./9.jpg);
background-size: 100% 100%;
} #four {
top: 100px;
left: 0;
background: url(./1.jpg);
background-size: 100% 100%;
} #five {
top: 100px;
left: 100px;
background: url(./2.jpg);
background-size: 100% 100%;
} #six {
top: 100px;
left: 200px;
background: url(./4.jpg);
background-size: 100% 100%;
} #seven {
top: 200px;
left: 0;
background: url(./3.jpg);
background-size: 100% 100%;
} #eight {
top: 200px;
left: 100px;
background: url(./6.jpg);
background-size: 100% 100%;
} #nine {
top: 200px;
left: 200px;
background: url(./8.jpg);
background-size: 100% 100%;
} #box .cBox {
position: absolute;
}
</style>
</head> <body>
<div id="box">
<span id="one"></span>
<span id="two"></span>
<span id="three"></span>
<span id="four"></span>
<span id="five"></span>
<span id="six"></span>
<span id="seven"></span>
<span id="eight"></span>
<span id="nine"></span>
</div>
</body>
<script>
var oBox = document.getElementById("box")
var box = document.querySelectorAll("span"); function Box(boxName) {
boxName.onmousedown = function (eve) {
var e = eve || window.event;
var cSpan = document.createElement("span");
cSpan.style.background = getComputedStyle(boxName).background;
cSpan.style.top = boxName.offsetTop + "px";
cSpan.style.left = boxName.offsetLeft + "px";
cSpan.className = "cBox"
oBox.appendChild(cSpan)
var offsetX = e.pageX - cSpan.offsetLeft;
var offsetY = e.pageY - cSpan.offsetTop;
document.onmousemove = function (eve) {
var e = eve || window.event;
cSpan.style.left = e.pageX - offsetX + "px";
cSpan.style.top = e.pageY - offsetY + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
var spans = oBox.getElementsByTagName("span")
var minSpan = null;
var min = 1000;
for (var i = 0; i < spans.length - 1; i++) {
var span = spans[i];
var dis = distance(cSpan, span);
if (dis <= min) {
min = dis;
minSpan = span;
}
}
var lsColor = getComputedStyle(minSpan).background;
minSpan.style.background = getComputedStyle(boxName).background;
boxName.style.background = lsColor;
oBox.removeChild(cSpan);
document.onmouseup = null;
}
return false;
}
} function distance(span1, span2) {
var a = span1.offsetLeft - span2.offsetLeft;
var b = span1.offsetTop - span2.offsetTop;
var c = Math.sqrt(a * a + b * b);
return c;
}
for (var i = 0; i < box.length; i++) {
Box(box[i]);
}
</script>
</html>
ps:案例中的图片没有办法上传,想要的同学可以自行百度
完整效果:
原生JS实现九宫格拼图的更多相关文章
- js版九宫格拼图与启发式搜索（A*算法）
九宫格拼图游戏大家都很熟悉,这里给大家如介绍何应用状态空间搜索的方式求解拼图的最佳路径和一个游戏dome及自动求解方法: 本文分web版游戏的实现和启发式搜索算法两部分: 先看dome,直接鼠标点击要 ...
- 原生js实现九宫格,全解析
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 原生JS实现拼图游戏
最近无聊,练练原生JS:实现拼图游戏.两种玩法:第一种是单击元素进行交换位置:第二种是拖拽元素进行位置交换.首先需要上传图片并进行回显(需要用到FileReader):下面是部分截图: 可以自行设置切 ...
- JS 九宫格算法 用原生js实现
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- 【坑】前端使用ajax异步请求以后，springMvc拦截器跳转页面无效
文章目录 前言 `$.ajaxSetup( )` 后记 前言 本文着重解决前后端分离开发的页面调整问题. 笔者,在做一个需求,需要对访问网站,但是没有登录的用户进行拦截,将他们重定向到首页. 很简单的 ...
- Ctex ERROR Reading
提供一个"Ctex ERROR Reading"的处理办法 方法/步骤: 1. 再我们打开一些网上下载的文档的时候可能出现错误提示 2. 这种问题一般是文件编码的问题,我们需要选择 ...
- python 之 网络编程（基于UDP协议的套接字通信）
8.5 基于UDP协议的套接字通信 UDP协议:数据报协议 特点:无连接,一发对应一收,先启动哪一端都不会报错 优点:发送效率高,但有效传输的数据量最多为500bytes 缺点:不可靠:发送数据,无需 ...
- go语言的安装及环境配置
Go语言开发环境搭建(ubuntu) 1.清理.卸载之前的 go 语言环境: 删除go目录:sudo rm -rf /usr/local/go 删除软链接(如果建立了软链接):sudo rm -rf ...
- 【hash】Power Strings
[题意]: 给出s串出来,能否找到一个前缀 ,通过多次前缀进行拼接.构成s串.如果有多个,请输出最多次数那个. 如:aaaa 可以用1个a,进行4次拼接 可以用2个a,进行2次拼接 可以用4个a,进行 ...
- 禁止服务向 eureka 上注册配置文件
### 禁止向注册中心注册服务eureka.client.register-with-eureka=false
- 怎样安装ipython
ipython 是一个python的交互式shell, 比默认的python shell更好用, 支持自动补全 / 上下翻等功能. 下面是按照方法: # 通用安装方法 pip install ipy ...
- 最全的ADB命令行大全（转）
基本用法 命令语法 adb 命令的基本语法如下: adb [-d|-e|-s ] 如果只有一个设备/模拟器连接时,可以省略掉 [-d|-e|-s ] 这一部分,直接使用 adb . 为命令指定目标设备 ...
- jenkins pipline
def getHost(){ def remote = [:] remote.name = 'server02' remote.host = '39.19.90' remote.user = 'roo ...
- python中数组用法
增加时a.append( 'a ')就可以了.只要按顺序加,就没有问题 . 使用时,完全可以使用下标: 代码如下 复制代码 a[0] a[1] 但出果引用不存在的下标,则会引发异常.这时,你需要先添加 ...