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 相关文章推荐
CSS3 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
完美解决IE8下不兼容rgba()的问题
Mar 31 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 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
关于时间计算的结总
2006/12/06 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
python Django批量导入不重复数据
2016/03/25 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python是否适合网页编程详解
2019/10/04 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python连接Impala实现步骤解析
2020/08/04 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
大学生旷课检讨书1000字
2015/02/19 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
Python pyecharts绘制条形图详解
2022/04/02 Python
python创建字典及相关管理操作
2022/04/13 Python