图片的增删查

先创建一个盒子，几个按钮和输入框

<button id="bnt1">创建盒子</button>
<button id="bnt1">插入图片</button>
<button id="bnt1">删除图片</button>
<input type="text" id = "inpt"  style=" 50px" /><button id="bnt1
">插入</button>
<div id= "Div"></div>

 

在写样式

  @keyframes myfirst
        {
            from  { height: 0px;}
            to   {
                height: 100px;
            }
        }
        @keyframes imgfirst
        {
            from  { height: 0px;
                transform: rotate(0deg);
            }
            to   {
                height: 100px;
                transform: rotate(720deg);  //旋转720°
            }
        }
       .box{
            animation: myfirst 2s forwards; 
            height: 0px;
            border: 1px solid red;
            overflow: hidden;
        }
        .imgSty{
            animation: imgfirst 2s forwards;
            border: 1px solid green;
        }
        .imgSty2{
            transition:all 1s;
        }     

最后写效果

window.event = function(){
   function  $(oId){  //可以用$代替document.getElmentById
       return document.getElmentById(oId);    
   }         
       var oBnt1 = $("bnt1")
       var oBnt2 = $("bnt2")
       var oBnt3 = $("bnt3")
       var oBnt4 = $("bnt4")
       var oImg =['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']; //用一个数组存放图片
    
    oBnt1.onclick = function(){   //创建盒子
         var oDiv = $("Div")
         oDiv.className = ".box";
     }
    oBnt2.onclick = function(){  //插入图片
        if(oImg.length>0){
            var oImgs = document.createElement("img");
                   oImgs.style.height = "100px";
                   oImgs.style.width = "120px";
             if(ele=oImg.pop()){  //pop()方法用于删除数组的最后一个元素并返回删除的元素
                    oImgs.src = ele;
             }      
                    oImgs.className = "imgSty";
                    oDiv.appendChild(oImgs);
         }
                    alert("没有图片");
      }
    oBnt3.onclick = function(){  //删除图片
        var imgs = document.getElementByTagName("img");
          if(imgs.length>0){
              imgs[0].className = "imgSty2";
              imgs[0].style.width = "0px";
              setTimeout(function(){
                       if(imgs[0])
                          oDiv.removeChild(oimgs[0])
                 },1000)                       
          }else{
               alert("已删完")
                }
     }
     oBnt4.onclick = function(){   //插入图片
               var oIpnt = $("inpnt");
               var oBj = parseInt(oIpnt .value);
          if(oDiv){
             var imgs = document.getElementByTagName("img");
             if(imgs .length>0){
                 var oImgs = document.createElement('img');
                        oImgs.style.height = "100px;";
                        oImgs.style.width = "120px";
                        oImgs.src = "img/1.jpg";
                        oImgs.className = 'imgSty';
                        var indexs = oimgs[oBj];
                        if(indexs)
                            oDiv.insertBefore(oImgs,indexs);
                        else
                            alert("加完了")
               }
           }
      }
}