Question

我知道有可用的jquesry框架，但我想创建自己的函数来使图像项目动画化到打字稿中的购物车中，到目前为止，我已经能够创建该项目图像方面的克隆，但我没有能够将图像移动到购物车这是我尝试过的

产品页面：

<body id="body"> 
     <span class="shopping-cart" style="float:right;font-size:20px;" align="right">
           <b><span id="total" >0</span></b>
           <img  src="./assets/cart.png" />
     </span>
           <div id="1" style="display:inline-block;margin:10px;">
              <table>
                 <tr align="center">
                    <td><img src="./assets/item1.png" height="" width="" alt="item" /></td> 
                 <tr/> 
                 <tr>
                    <td><input type="text"  id="qty" placeholder="Quantity" /></td> 
                 <tr/> 
                 <tr>
                    <td colspan="3"><input type="button" onclick="addToCart(1)" value=" Add To Cart"/></td>
                 <tr/>
              </table>
           </div>
</body>

打字稿功能：

    function addToCart(id){ 
                  total += parseInt(qty.value) || 1;
                  cartTotal.innerHTML = total.toString(); 

                 let item:HTMLElement = <HTMLElement>document.getElementById(id);
                 let cart:HTMLImageElement = <HTMLImageElement>document.getElementsByClassName("shopping-cart").item(0);

                   console.log(cart)
                   console.log(item.querySelector("img"));

                   itemImg = <HTMLElement>item.querySelector("img")
                  console.log(itemImg);

                  if(itemImg){
                          copyImg = <HTMLElement>itemImg.cloneNode();
                          console.log();
                          copyImg.style.opacity = "0.5";
                          copyImg.style.position = "absolute";
                         copyImg.style.width = "150px"
                          copyImg.style.height = "150px"
                          copyImg.style.zIndex = "100";
                         //  copyImg.offsetTop= item.offsetTop;  //offset giving me readonly error

                        document.getElementById("body").appendChild(copyImg);

                    copyImg.animate([ { opacity: 1, easing: 'ease-out' }, 
                                   { opacity: 0 },
                                        ],
                                    3000); 
                }

 }

如何将图像动画化到购物车？

0 个答案: