使用js做創建圖片及刪除圖片若有什麼不對或不完整的地方，請大家提出來，謝謝

首先我們要在<body>中創建一個按鈕<button>來用作點擊創建圖片，在<button>中寫一個點擊事件（隨便命名），在創建一個<div>存放圖片，在<div>中創建一個id（跟上面一樣隨便命名）代碼如下: <button onclick="hehe()">創建圖片</button> <di ...

首先我們要在<body>中創建一個按鈕<button>來用作點擊創建圖片，在<button>中寫一個點擊事件（隨便命名），

在創建一個<div>存放圖片，在<div>中創建一個id（跟上面一樣隨便命名）

代碼如下:

再寫幾個需要用到的樣式：

我們先定義一個haol（隨便定義的），裡面transition:all 3s表示動畫屬性，所有都是3s,

代碼如下：

.haol{
transition:all 3s;
}

再定義一個旋轉（這點我是百度上面的）,語法是：@keyframes myfirst{ to{} from}
        @keyframes myfirst{
            to{
                transform: rotate(0deg);
            }
            from{
                transform: rotate(160deg);         //旋轉160度
            }
        }

定義一個透明度（與上相同）
        @keyframes myfirst2{
            to{
                filter:alpha(Opacity=10);    //opacity透明度,
                opacity: 0.1;
            }
            from{
                filter:alpha(Opacity=80);
                opacity: 1;
            }
        }

定義一個over-out：animation動畫屬性
        .over-out{
            animation: myfirst 1s;
        }
       定義一個over-out1：animation動畫屬性 .over-out1{
            animation: myfirst2 2s;
        }

好，準備工作做完之後，我們來寫js部分，

首先，我們不能忘記寫開頭：

然後在這中間我們來寫具體部分:

我們可以用"$"來獲取指定網頁元素的函數，使用非常之頻繁，

代碼如下：

function $(oId){
             var obj=document.getElementById(oId);
            return obj;
        }

從上我們可以看出，在function中使用$定義一個參數為oId(隨便定義)

然後在定義var 來使用document.getElementById來定義id。

因為js為弱性語言,它是依此解析，所以在前面必須寫window.event,進行相容

代碼如下：

　　window.event = function(){}

現在我們寫創建圖片的js部分，先創建一個function setimge(){},然後在裡面寫內容

function setimge(){

　　先定義數組來存放圖片,我們可以用Array();如

　　var tupian = obj.Array();

　　然後再用tupian.push("n1.jpg");存儲圖片，這裡我存放了五張圖片

　　tupian.push("n2.jpg");

　　tupian.push("n3.jpg");

　　tupian.push("n4.jpg");

　　tupian.push("n5.jpg");

　　可以根據情況而定；

我們再用for迴圈

for(var i = 0;i<tupian.length;i++)

tupian.length是它的圖片，

再定義一個var來創建img;

var imgObj = document.createElement("img");

創建一個var來裝tupian[i],

var imgss = tupian[i];

在把scr賦值給imgss,

imgObj.src = imgss;

然後把function定義的addClass添加進來(這個後面會講到,現在先寫在這裡)

addClass(imgsObj,"haol");

我們可以用定義的imgObj來給一些值(在這裡先給它賦初值0px）：

imgObj.style. imgsObj.style.width = "0px";
imgObj.style.marginLeft = "0px";

在使用$符裡面寫<div>中寫的id值，appendChild是添加子元素

$("imgsId").appendChild(imgsObj);

}

其實圖片在點擊按鈕之前已經創建，只是我們看不見，因為我剛剛賦值為0px；

現在我們function中寫button中的onclick="hehe()",

function hehe(){

先定義一個var 來獲取img

var tupian = $("imgsId").getElementsByTagName("img");

再使用for迴圈

for(var i = 0;i<tupian.length;i++)

創建一個var來裝tupian[i],

var imgss = tupian[i我們可以賦一些值

imgsObj.style.width = "200px";
imgsObj.style.marginLeft = "20px";

現在點擊創建圖片按鈕，我們只是將圖片放大而已。

然後我們把游標移到圖片上，讓圖片旋轉，點擊讓它有提示框進行刪除，刪除時，圖片是慢慢消失。

首先寫游標移到圖片上，onmouseover就是游標移到圖片上；

imgsObj.onmouseover = function(){
addClass(this,"over-out"); // 、this表示上層中的imgsObj
}

然後是游標移出圖片上：
                imgsObj.onmouseout = function(){
                    removeClass(this,"over-out");
                }

做點擊圖片刪除：
                imgsObj.onclick = function(){
                     var ev=window.event;
                     var obj = ev.currentTarget;
                     removeimgs(obj);
                }
現在我們來做上面提到的addClass(),傳參數

首先定義function addClass(obj,cn){

　　定義一個cName獲取obj的classname;

　　然後是用if判斷cName的長度是否為0;

if(cNmae.length==0){

　　是的話，obj.cName= cn,

}else{

　　不是的話,obj.cName = (" "+cn);

}

然後是移除function.removeClass(obj , cn){ //跟上面一樣，先給參數，

定義一個cs獲取obj的classname;

cs = cs.split(); //split拆分字元串

for (var i = 0; i < cs.length; i++) { //for迴圈
                if (cs[i]==cn) { 判斷cs[i] 是不是等於cn
                cs.splice(i, 1); //splice（i,1）表示刪除i中第1個內容
            }
        }
            obj.className = cs.join(" ");//拆分完之後再重新連接
        }

}

現在做刪除圖片了

function removeimgs(obj,cnn){
            var f = window.confirm('是否要刪除該圖片');　　　　　　//confirm提示框
            if(f){
                addClass(obj,"over-out1");

setTimeout()方法用於在指定的毫秒數後調用函數或計算表達式
setTimeout(function(){　　　　　　

西安要找出父類，然後讓父類進行刪除　　　　　　　　
obj.parentNode.removeChild(obj);
},2000);

            }else{
                alert("取消刪除");
            }

}

程式基本做完了，完整代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
       c
    </style>
    <script language="JavaScript">
        function $(oId){
             var obj=document.getElementById(oId);
            return obj;
        }

            }else{
                alert("取消刪除");
            }

}

        function setimgs(){
            var tupian = Array();
            tupian.push("n1.jpg");
            tupian.push("n2.jpg");
            tupian.push("n3.jpg");
            tupian.push("n4.jpg");
            tupian.push("n5.jpg");
            for(var i = 0;i<tupian.length;i++){
                var imgsObj = document.createElement("img");
                var imgss = tupian[i];
                imgsObj.src = imgss;
                addClass(imgsObj,"haol");
                imgsObj.style.width = "0px";
                imgsObj.style.marginLeft = "0px";
                $("imgsId").appendChild(imgsObj);
            }
        }