首先我们要在<body>中创建一个按钮<button>来用作点击创建图片，在<button>中写一个点击事件（随便命名），
在创建一个<div>存放图片，在<div>中创建一个id（跟上面一样随便命名）
代码如下:
1 <button onclick="hehe()">创建图片</button> 2 <div id="imgsId"></div>
再写几个需要用到的样式：
我们先定义一个haol（随便定义的），里面transition:all 3s表示动画属性，所有都是3s,
代码如下：
1 .haol{ 2 transition:all 3s; 3 }
再定义一个旋转（这点我是百度上面的）,语法是：@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部分，
首先，我们不能忘记写开头：
<script language="JavaScript"></script>
然后在这中间我们来写具体部分:
我们可以用"$"来获取指定网页元素的函数，使用非常之频繁，
代码如下：
1 function $(oId){ 2 var obj=document.getElementById(oId); 3 return obj; 4 }
从上我们可以看出，在function中使用$定义一个参数为oId(随便定义)
然后在定义var 来使用document.getElementById来定义id。
因为js为弱性语言,它是依此解析，所以在前面必须写window.event,进行兼容
代码如下：
window.event = function(){}
现在我们写创建图片的js部分，先创建一个function setimge(){},然后在里面写内容
1 function setimge(){ 2 先定义数组来存放图片,我们可以用Array();如 3 var tupian = obj.Array(); 4 然后再用tupian.push("n1.jpg");存储图片，这里我存放了五张图片 5 tupian.push("n2.jpg"); 6 tupian.push("n3.jpg"); 7 tupian.push("n4.jpg"); 8 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; } function addClass(obj, cn){ var cName = obj.className; if(cName.length==0){ obj.className = cn; }else{ obj.className+=(" "+cn); } } function removeClass(obj, cn) { var cs = obj.className; cs = cs.split(" "); for (var i = 0; i < cs.length; i++) { if (cs[i]==cn) { cs.splice(i, 1); } } obj.className = cs.join(" "); } function removeimgs(obj,cnn){ var f = window.confirm('是否要删除该图片'); if(f){ addClass(obj,"over-out1"); setTimeout(function(){ obj.parentNode.removeChild(obj); },2000); }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); } } window.onload = function(){ setimgs(); } function hehe(){ var tupian = $("imgsId").getElementsByTagName("img"); for(var i = 0;i<tupian.length;i++){ var imgsObj = tupian[i]; imgsObj.style.width = "200px"; imgsObj.style.marginLeft = "20px"; imgsObj.onmouseover = function(){ addClass(this,"over-out"); } imgsObj.onmouseout = function(){ removeClass(this,"over-out"); } imgsObj.onclick = function(){ var ev=window.event; var obj = ev.currentTarget; removeimgs(obj); } } } </script> </head> <body> <button onclick="hehe()">创建图片</button> <div id="imgsId"></div> </body> </html>