原生js实现拼图效果

 更新时间:2021年08月01日 11:58:06   作者:蒲公英芽  
这篇文章主要为大家详细介绍了原生js实现拼图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了原生js实现拼图效果的具体代码,供大家参考,具体内容如下

需求:每次刷新页面后,右侧容器内会随机排列碎片图片,鼠标按下拖动到左侧,在正确坐标一定范围内,图片会自动吸附过去,放好的碎片不能再进行拖动。

先来看一下效果:

js代码 :

//执行初始函数
init();
function init() {
    //创建一个碎片容器
    var frag = document.createDocumentFragment();
    document.body.style.margin = "0px";
    //创建左侧图片容器
    var ul=createE("ul",{
        width: "260px",
        height: "400px",
        backgroundImage: "url(./img/3.jpg)",
        borderRight: "1px solid #000",
        borderBottom: "1px solid #000",
        listStyle: "none",
        padding: "0px",
        margin: "0px",
        opacity: ".3",
        position: "absolute"
    })
    //创建li,显示图片中的边框
    var li=createE("li",{
        width: "51px",
        height: "79px",
        borderLeft: "1px solid #000",
        borderTop: "1px solid #000",
        padding: "0px",
        margin: "0px",
        float: "left"
    })
    //循环,将li复制插入到ul中
    for (i = 0; i < 25; i++) {
        ul.appendChild(li.cloneNode(false));
    }
    //将ul插入到碎片容器中
    frag.appendChild(ul);
    //创建右侧图片容器,因为img要相对body定位,所以它的父容器不能有定位属性
    var div=createE("div",{
        width: "302px",
        height: "302px",
        border: "1px solid #000",
        marginLeft: "400px"
    })
    //创建图片标签
    for (var j = 0; j < 5; j++) {
        for (var k = 0; k < 5; k++) {
            var img=createE("img",{
                width: "52px",
                height: "80px",
                position: "absolute",
                left: Math.floor(Math.random() * 250) + 400 + "px",
                top: Math.floor(Math.random() * 220) + "px"
            })
            img.src = "./img/img" + j + "-" + k + ".jpg";
            //图片侦听mouseHandler事件
            img.addEventListener("mousedown", mouseHandler);
            div.appendChild(img);
        }
    }
    //将div插入到碎片容器中,再将frag插入到body中
    frag.appendChild(div);
    document.body.appendChild(frag);
}
//鼠标事件
function mouseHandler(e) {
    switch (e.type) {
        case "mousedown":
            //清除点击后移动图片的默认效果
            e.preventDefault();
            console.log(this.src.match(/img\/img(.*)\.jpg/))
            //获取到图片路径中的数字,计算图片正确的位置坐标
            var imgSrc = this.src.match(/img\/img(.*)\.jpg/)[1].split("-");
            var rightL=imgSrc[1]*52;
            var rightTop=imgSrc[0]*80;
            //如果图片正确放入,直接跳出
            if (this.style.left===rightL+"px" && this.style.top===rightTop+"px") return;
            //将当前图片的z-index设为最大
            this.style.zIndex = "999";
            //将e.offsetX、e.offsetY、当前点击图片对象存入到document中
            document.x = e.offsetX;
            document.y = e.offsetY;
            document.elem = this;
            document.rightL=rightL;
            document.rightTop=rightTop;
            //document侦听mousemove事件和mouseup事件
            document.addEventListener("mousemove", mouseHandler);
            document.addEventListener("mouseup", mouseHandler);
            break;
        case "mousemove":
            //自动吸附的距离大小
            var gap = 20;
            //设置当前的图片跟着鼠标移动而移动
            let x=e.clientX - this.x;
            let y=e.clientY - this.y;
            this.elem.style.left = x + "px";
            this.elem.style.top = y + "px";
            //如果当前图片的位置坐标在一定范围内,则让它自动吸附
            if (x>=this.rightL-gap &&x<=this.rightL+gap&&
                y>=this.rightTop-gap &&y<=this.rightTop+gap) {
                this.elem.style.left = this.rightL + "px";
                this.elem.style.top = this.rightTop + "px";
            }
            break;
        case "mouseup":
            //鼠标松开的时候,将当前图片的z-index改小
            this.elem.style.zIndex = "10";
            //鼠标松开后,移除document的mousemove和mouseup事件,清空数据,防止内容泄露
            this.removeEventListener("mousemove", mouseHandler);
            this.removeEventListener("mouseup", mouseHandler);
            this.elem=null;
            break;
    }
}
//创建标签
function createE(elem,styleData){
    var elem=document.createElement(elem);
    for(var prep in styleData){
        elem.style[prep]=styleData[prep];
    }
    return elem;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 浅谈Emergence.js 检测元素可见性的 js 插件

    浅谈Emergence.js 检测元素可见性的 js 插件

    这篇文章主要介绍了浅谈Emergence.js 检测元素可见性的 js 插件,详细的介绍了Emergence.js安装和使用方法,具有一定的参加性,有兴趣的可以了解一下
    2017-11-11
  • TypeScript中declare关键字的具体使用

    TypeScript中declare关键字的具体使用

    declare关键字用来告诉编译器,某个类型是存在的,可以在当前文件中使用,本文主要介绍了TypeScript中declare关键字的具体使用,感兴趣的可以了解一下
    2023-10-10
  • JavaScript 加号(+)运算符号

    JavaScript 加号(+)运算符号

    在一些框架中看到了类似这样的写法:+new Date();感觉有些怪,查阅了相关资料和一些网友的帮助.对此用法解释如下,希望对大家有所帮助,不合适的地方请大家指正!
    2009-12-12
  • javascript实现yield的方法

    javascript实现yield的方法

    这篇文章介绍了javascript实现yield的方法,有需要的朋友可以参考一下
    2013-11-11
  • 微信小程序整合使用富文本编辑器的方法详解

    微信小程序整合使用富文本编辑器的方法详解

    这篇文章主要介绍了微信小程序整合使用富文本编辑器的方法,结合实例形式分析了微信小程序整合与使用富文本插件WxParse相关步骤与操作技巧,需要的朋友可以参考下
    2019-04-04
  • javascript中this的四种用法

    javascript中this的四种用法

    在javascript当中每一个function都是一个对象,所以在这个里var temp=this 指的是function当前的对象。this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
    2015-05-05
  • js实现多行文本框统计剩余字数功能

    js实现多行文本框统计剩余字数功能

    本文主要介绍了js实现多行文本框统计剩余字数功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js跑步算法的实现代码

    js跑步算法的实现代码

    这篇文章主要是对js跑步算法的实现代码进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 使用ESLint禁止项目导入特定模块的方法步骤

    使用ESLint禁止项目导入特定模块的方法步骤

    这篇文章主要介绍了使用ESLint禁止项目导入特定模块的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JS实现页面跳转并传值

    JS实现页面跳转并传值

    这篇文章主要为大家详细介绍了JS实现页面跳转并传值,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论