原生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来实现这个拖 ...
随机推荐
- Java串口通信 RXTX 解决过程
背景介绍: 由于第一次用Java与硬件通信,网上查了许多资料,在这进行整理,便于以后学习.本人串口测试是USB串口设备连接电脑,在设备管理器中找到端口名称(也可以通过一些虚拟串口工具模拟). 下面主要 ...
- visio 绘图素材
1. 前言 visio是个绘图的好工具,可是自带图形元素有限,没有还要自己画. 推荐几个矢量图形素材库,里边有很多图形,很方便的导入到visio中,放大也不失真. 阿里巴巴矢量图库网 stockio ...
- smarty中常用的流程控制逻辑
if else {if $age > 18} <div>年满十八岁!</div> {else if $age > 16} <div>年满十六岁!< ...
- 如何创建etcd双向通信证书
# 安装证书生成软件 wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 -O /usr/bin/cfssl wget https://pkg.cfss ...
- SRID (空间引用识别号, 坐标系)【转】
SRID (空间引用识别号, 坐标系)-云栖社区-阿里云 Spatial Reference List -- Spatial Reference Chapter 8. PostGIS Referenc ...
- Kafka 的这些原理你知道吗
如果只是为了开发 Kafka 应用程序,或者只是在生产环境使用 Kafka,那么了解 Kafka 的内部工作原理不是必须的.不过,了解 Kafka 的内部工作原理有助于理解 Kafka 的行为,也利用 ...
- SOS dp
设$ans=\sum\limits_{A \cap B=\varnothing} f(A)g(B) $ 直接暴力枚举子集是$O(3^n)$, 一个技巧是先预处理出$h(S)=\sum\limits_{ ...
- Codeforces Round #419 (Div. 1) (ABCD)
1. 815A Karen and Game 大意: 给定$nm$矩阵, 每次选择一行或一列全部减$1$, 求最少次数使得矩阵全$0$ 贪心, $n>m$时每次取一列, 否则取一行 #inclu ...
- javascript进度条实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 伪静态 net-IIS伪静态配置，使用URLRewriter实现伪静态
https://www.cnblogs.com/zhenzaizai/p/10364343.html 前段时间开发公司官网,用到了URLRewriter实现伪静态,在VS调试模式下没有任何问题,部署到 ...