HTML5拖拽功能实现的拼图游戏


Posted in HTML / CSS onJuly 31, 2018

具体代码如下所示:
 

<!--代码如下,最下面给出了我测试用的9张250*250的图片切片-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>drag拖拽</title>
    <style>
        .box{
             float: left;
        }
        img{
            width: 150px;
            height:150px;
        }
        #puzzle{
            font-size: 0;
            margin:80px auto;
            padding: 5px;
            width: 460px;
        }
    </style>
</head>
<body>
    <div id="puzzle">
        <div class="box"><img alt="1"></div>
        <div class="box"><img alt="2"></div>
        <div class="box"><img alt="3"></div>
        <div class="box"><img alt="4"></div>
        <div class="box"><img alt="5"></div>
        <div class="box"><img alt="6"></div>
        <div class="box"><img alt="7"></div>
        <div class="box"><img alt="8"></div>
        <div class="box"><img alt="9"></div>
    </div>
    <script>
        var image = document.getElementsByTagName("img");
        var box = document.getElementsByClassName("box");
        image.draggable = true;
        var source = "";
        var nowImage;
        var nowImageBox;
        var thenImage;
        for(let i=0;i<image.length;i++){
            source = "picture"+i+".jpg";
            image[i].setAttribute("src",source);
            image[i].onmousedown = function(){
                nowImage = this;
                nowImageBox = this.parentNode;
            }
            box[i].ondragover = function(event){
             event.preventDefault(); //去除ondragover事件的默认行为,该行为默认无法将数据或者元素放置到其他元素
            }
            box[i].ondrop = function(event){
                thenImage = box[i].childNodes[0];
                box[i].appendChild(nowImage);
                nowImageBox.appendChild(thenImage);
            }
        }
    </script>
</body>
</html>

HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏HTML5拖拽功能实现的拼图游戏

 总结

以上所述是小编给大家介绍的HTML5拖拽功能实现的拼图游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
Html5页面二次分享的实现
Jul 30 #HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 #HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 #HTML / CSS
You might like
php 获取客户端的真实ip
2009/11/30 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
Web版彷 Visual Studio 2003 颜色选择器
2007/01/09 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
python字典get()方法用法分析
2015/04/17 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
Java基础面试题
2014/07/19 面试题
教师业务学习制度
2014/01/25 职场文书
家长学校工作方案
2014/05/07 职场文书
企业文化标语口号
2014/06/09 职场文书
县政府办公室领导班子个人对照检查材料
2014/09/16 职场文书
公务员处分决定书
2015/06/25 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技