原生javascript制作的拼图游戏实现方法详解资源-CSDN下载

90 浏览量 2020-11-20 21:26:38 上传评论收藏 58KB PDF 举报

资源推荐

资源详情

资源评论

原生原生javascript制作的拼图游戏实现方法详解制作的拼图游戏实现方法详解

本文实例讲述了原生javascript制作的拼图游戏实现方法。分享给大家供大家参考，具体如下：

实现方法实现方法

//1、让所有的li（在ul里）可以拖拽

//2、交换li的位置计算背景图位置

//1、让所有的li（在ul里）可以拖拽

//根据鼠标的位置，计算目标li的序号

//根据行号和列号计算下标

//行号*3+列号

//2、归位

此处没有背景图请自行添加 css样式

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

html,body{

margin:0;

padding:0;

}

#box{

list-style:none;

position:relative;

width:600px;

height:600px;

box-sizing:border-box;

margin:10px auto;

}

li{

position:absolute;

width:200px;

height:200px;

border:1px solid white;

background-image:url(img/b1.jpg);

background-size:600px 600px;

}

#box li:nth-child(1){

left:0px;

top:0px;

background-position:0px 0px;

}

#box li:nth-child(2){

left:200px;

top:0px;

background-position:-200px 0px;

}

#box li:nth-child(3){

left:400px;

top:0px;

background-position:-400px 0px;

}

#box li:nth-child(4){

left:0px;

top:200px;

background-position:0px -200px;

}

#box li:nth-child(5){

left:200px;

top:200px;

background-position:-200px -200px;

}

#box li:nth-child(6){

left:400px;

top:200px;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38738422

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip