如何使用JavaScript传输图像

时间：2018-12-02 16:04:33

标签： javascript html css

我想创建类似“ puzzle”的东西。我已经插入了图片，并使得用户可以输入行和列。

当用户单击图像并单击一个空的正方形时，如何实现（使用JavaScript），图片将复制并显示在此处？
您能以正确的方式指导我吗，我不知道如何开始或使用什么。

enter image description here

之后： enter image description here 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>


<script>
    function el( tagName ) {
    return document.createElement( tagName );
    }

    var r = window.prompt("Please enter rows:"); //vrstica tr
    while(r<5 || r>20){
    r = window.prompt("Wrong, enter a number between 5 and 20:"); 
    }

    var c = window.prompt("Please enter columns:"); //stoplec td
    while(c<10 || c>40){
    c = window.prompt("Wrong, enter a number between 10 and 40:");
    }

    var table = el( 'table' );

    for ( var i = 0; i < r; i++ ) {

        var tr = el( 'tr' );

        for ( var j = 0; j < c; j++ ) {

            tr.appendChild( el( 'td' ) );        
        }

    table.appendChild( tr );
    }

    document.body.appendChild( table );
</script>

</body>

2 个答案:

答案 0 :(得分：1)

algotithm是“当用户单击图像时，获取src并存储在变量中。当用户单击空白框时，检查其是否为空，然后附加存储在变量中的图像标签src”

js中的代码行比jquery大，这就是为什么我使用jquery

将此link用于表td link2上的Java脚本onclick事件

根据您在jquery中的请求：

var image="";
$(function(){

 $("table#im").find("td").click(function(){
    image=$(this).html();
   
 });
 $("table#box ").find("td").click(function(){
   
   if(image==""){
    alert("select image");
    
    }
    else{
      $(this).append(image);
    }
 });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mario</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table,td {
            border: 1px solid grey;
            border-collapse: collapse;
            margin: 10px;
        }

        img {
            display: block;
        }

        td {
            border: 1px solid grey;
            width: 33px;
            height: 33px;
            background-color: silver;
        }

    </style>

</head>
<body>
<table id="im">
        <tr>
            <td><img src="images/sprite1.gif" alt="sprite1.gif"></td>
            <td><img src="images/sprite2.gif" alt="sprite2.gif"></td>
            <td><img src="images/sprite3.gif" alt="sprite3.gif"></td>
            <td><img src="images/sprite4.gif" alt="sprite4.gif"></td>
            <td><img src="images/sprite5.gif" alt="sprite5.gif"></td>
            <td><img src="images/sprite6.gif" alt="sprite6.gif"></td>
            <td><img src="images/sprite7.gif" alt="sprite7.gif"></td>
            <td><img src="images/sprite8.gif" alt="sprite8.gif"></td>
            <td><img src="images/sprite9.gif" alt="sprite9.gif"></td>
            <td><img src="images/sprite10.gif" alt="sprite10.gif"></td>
            <td><img src="images/sprite11.gif" alt="sprite11.gif"></td>
            <td><img src="images/sprite12.gif" alt="sprite12.gif"></td>
            <td><img src="images/sprite13.gif" alt="sprite13.gif"></td>
            <td><img src="images/sprite14.gif" alt="sprite14.gif"></td>
            <td><img src="images/sprite15.gif" alt="sprite15.gif"></td>
            <td><img src="images/sprite16.gif" alt="sprite16.gif"></td>
        </tr>
    </table>

<br><br><br><br><br>
<table id=box>
        <tr>
           <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

答案 1 :(得分：1)

由于已经有一张图片，因此可以使用CSS Sprite方法。

加载图像带，然后使用类显示图像的相关部分。

这是一个带有菜单中的图标和一个小网格的示例。单击任何图像，然后单击网格中的正方形以添加图标。

请注意，此示例并非完美的像素，但可以让您知道如何进行操作。

const grid = document.querySelector('.grid');

// Listen for clicks on the grid
grid.addEventListener('click', handleClick, false);

const menu = document.querySelector('.menu');

// Listen for clicks in the menu
menu.addEventListener('click', handleMenu, false);

const html = [];
const type = [];

// Create a blank grid
for (let i = 0; i < 36; i++) {
  html.push('<div class="block"></div>');
}

// ...and add it to the grid element
grid.insertAdjacentHTML('beforeend', html.join(''));

function handleClick(e) {

  // Change the class of the grid cell to match the icon
  // by shifting the first element off the type array
  e.target.className = `image block ${type.shift()}`;
}


// When an icon is clicked, push the icon class to
// the `type` array
function handleMenu(e) {
  const { classList } = e.target;
  type.push(classList[2]);
  classList.add('highlight');
}
* {
  box-sizing: border-box;
}
 
.image {
  background-image: url('https://i.imgur.com/LrpJqJ7.png');
  background-repeat: no-repeat;
  height: 46px;
  width: 702px;
}

.block {
  border: 1px solid #dfdfdf;
  width: 42px;
  height: 42px;
  background-color: #efefef;
}

.highlight {
  border: 2px solid black;
}

.questionmark {
  background-position: -1px -1px;
}

.panel {
  background-position: -45px -1px;
}

.wall {
  background-position: -89px 0px;
}

.pyramid {
  background-position: -134px 0px;
}

.snail {
  background-position: -178px 0px;
}

.toadstool {
  background-position: -222px 0px;
}

.coin {
  background-position: -266px 0px;
}

.b-left {
  background-position: -310px 0px;
}

.b-center {
  background-position: -354px 0px;
}

.b-right {
  background-position: -398px 0px;
}

.pipe-top-left {
  background-position: -442px 0px;
}

.pipe-top-right {
  background-position: -486px 0px;
}

.pipe-left {
  background-position: -530px 0px;
}

.pipe-right {
  background-position: -574px 0px;
}

.cloud {
  background-position: -618px 0px;
}

.grid {
  display: grid;
  width: 252px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.menu .block {
  display: inline-block;
}
<div class="menu">
  <div class="image block questionmark"></div>
  <div class="image block panel"></div>
  <div class="image block wall"></div>
  <div class="image block pyramid"></div>
  <div class="image block snail"></div>
  <div class="image block toadstool"></div>
  <div class="image block coin"></div>
  <div class="image block b-left"></div>
  <div class="image block b-center"></div>
  <div class="image block b-right"></div>
  <div class="image block pipe-top-left"></div>
  <div class="image block pipe-top-right"></div>
  <div class="image block pipe-left"></div>
  <div class="image block pipe-right"></div>
  <div class="image block cloud"></div>
</div>
<div class="grid"></div>

相关问题
最新问题