将多个可拖动和可调整大小的图像添加到画布

时间：2013-02-25 13:30:54

标签： jquery html html5

我正在开发一个在线购物网站项目。为此，我需要在帆布上添加多个图像，如腰带，帽子，衬衫或裤子。最后，画布应作为图像导入。

有人建议我怎么做，也帮我添加多个可拖动和可调整大小的图像到画布。请帮帮我

这就是我试图做的事情。

<html lang="en">
<head>
  <title>Outfit Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script type="text/javascript">
jQuery(document).ready(function(event){
$("#shirt").resizable().draggable();
   $('.pic1').live('mouseover',function(){
    $(this).resizable().draggable();
});
});
  var shirt;
  var pant;
  function selectshirt(src)
  {
  shirt = src;
  path = "<img class=\"pic1\" src=\""+src+"\" height=\"300px\" width=\"300px\"/>";
  invisible("shirtcontainer");
  visible("pantcontainer");

  document.getElementById("shirt").innerHTML=document.getElementById("shirt").value+path;
  document.getElementById("cart").style.visibility="visible";
  }
  function selectpants(src)
  {
  pant = src;
  path = "<img class=\"pic1\" src=\""+src+"\" height=\"400px\" width=\"300px\"/>";
  document.getElementById("trousers").innerHTML=path;
  }
  function addtocart()
  {
  alert("Shirt:"+shirt+"\npant:"+pant);
  }
  function changeshirt()
  {
  visible("shirtcontainer");
  invisible("pantcontainer");
  }
  function changepant()
  {
  visible("shirtcontainer");
  invisible("pantcontainer");
  }
  function visible(containername)
  {
  document.getElementById(containername).style.visibility="visible";
  }
  function invisible(containername)
  {
  document.getElementById(containername).style.visibility="hidden";
  }
  </script>
</head>

<body>
<div id="leftpanel" style="position:absolute;left:0;width:33%;">
<div style="left:0;height:30%;" id="shirt"></div>
<div style="left:0;height:70%;" id="trousers"></div>
<div style="left:0;height:70%;" id="cart">
<button  onclick="changeshirt()">Change Shirt</button>
<button  onclick="addtocart()">Add to cart</button>
</div> 
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;left:500;width:33%;overflow:auto;">
<div id="shirtcontainer">
<img src="images/shirts/shirt1.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt2.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt3.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt4.png" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt5.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt6.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
<img src="images/shirts/shirt7.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
</div>
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;width:33%;overflow:auto;">
<div id="pantcontainer">
<img src="images/pants/pant1.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant2.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant3.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant4.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant5.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant6.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
<img src="images/pants/pant7.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
</div>
</div>


</body>
<script>
invisible("pantcontainer");
invisible("cart");
</script>
</html>

1 个答案:

答案 0 :(得分：0)

这是我的代码：

我已经完成了10件衬衫和10条裤子，现在我要让它充满活力。但对于那些需要代码的人可以参考这个。它可能对你有帮助。

<html lang="en">

<head>
  <title>Outfit Demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
  // sets draggable the elements with id="shirt"
  $('#shirt').draggable({
    cursor: 'move',        // sets the cursor apperance
    containment: '#leftpanel'    // sets to can be dragged only within its parent
  });
  // sets draggable the paragraph inside #trousers
  $('#trousers').draggable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });

  $('#btn').click(function() {
    // removes all LI with class="cls" in OL
    $('#shirt').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  $('#trousers').resizable({
    cursor: 'move',
    containment: '#leftpanel'      // sets to can be dragged only within its parent
  });
  });
});

  var shirt;
  var pant;
  function selectshirt(src)
  {
  shirt = src;
  path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  invisible("middlepanel");
  visible("rightpanel");

  document.getElementById("shirt").innerHTML=path;
  document.getElementById("cart").style.visibility="visible";
  }
  function selectpants(src)
  {
  pant = src;
  path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
  document.getElementById("trousers").innerHTML=path;
  }
  function addtocart()
  {
  alert("Shirt:"+shirt+"\npant:"+pant);
  }
  function changeshirt()
  {
  visible("middlepanel");
  invisible("rightpanel");
  }
  function changepant()
  {
  visible("shirtcontainer");    
  invisible("pantcontainer");
  }
  function visible(containername)
  {
  document.getElementById(containername).style.visibility="visible";
  }
  function invisible(containername)
  {
  document.getElementById(containername).style.visibility="hidden";
  }
  </script>
</head>

<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
    <div id="shirt"  style="left:0;height:300px;width:300px;"></div>
    <div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div> 
<div style="left:0;height:70%;" id="cart">
    <button  onclick="changeshirt()">Change Shirt</button>
    <button  onclick="addtocart()">Add to cart</button>
    <button id="btn">Resize</button>
</div> 
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="shirtcontainer">
        <img src="images/shirts/shirt1.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt2.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt3.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt4.png" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt5.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt6.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
        <img src="images/shirts/shirt7.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
    </div>
</div> 
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
    <div id="pantcontainer">
        <img src="images/pants/pant1.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant2.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant3.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant4.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant5.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant6.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
        <img src="images/pants/pant7.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
    </div>
</div>


</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>
相关问题
最新问题