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改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
canvas实现图片马赛克的示例代码
Mar 26 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
May 31 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
详解CSS故障艺术
May 25 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
建立动态的WML站点(二)
2006/10/09 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
JavaScript动态绑定详解
2017/09/14 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
详解python 中in 的 用法
2019/12/12 Python
ASP.NET Core中的配置详解
2021/02/05 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
求职自荐信范文格式
2013/11/29 职场文书
学生鉴定评语大全
2014/05/05 职场文书
大气污染防治方案
2014/05/19 职场文书
推广活动策划方案
2014/08/23 职场文书
招标承诺书
2014/08/30 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers