首先我们要在<body>中创建一个按钮<button>来用作点击创建图片，在<button>中写一个点击事件（随便命名），

在创建一个<div>存放图片，在<div>中创建一个id（跟上面一样随便命名）

代码如下:

<button onclick="hehe()">创建图片</button>
        <div id="imgsId"></div>

再写几个需要用到的样式：

我们先定义一个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部分，

首先，我们不能忘记写开头：

<script language="JavaScript"></script>

然后在这中间我们来写具体部分:

我们可以用"$"来获取指定网页元素的函数，使用非常之频繁，

代码如下：

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;
        }

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

使用js做创建图片及删除图片 若有什么不对或不完整的地方，请大家提出来，谢谢的更多相关文章

  1. H5实现查看图片和删除图片的效果

    在最近的项目中,H5需要实现查看图片和删除图片的效果,总结如下: 一.查看图片 查看图片使用weui的gallery.首先添加gallery的html,然后隐藏. <div class=&quo ...

  2. js实现上传前删除指定图片

    "上传之前"移除选错图片代码: 此处效果为:点击需要删除的图片,确认删除就可以了.

  3. spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置

    spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...

  4. python 指定日期图片文件删除

    手机使用python操作图片文件 起因 前几天去国图拍了一本书,一本心理学方面的书,也许你问我为什么不去买一本,或者去网上找pdf. 其实吧,关于心理学方面的书可以说在市面上一抓就是一堆,至于拍这本书 ...

  5. 使用GitHub-Pages创建博客和图片上传问题解决

    title: 使用GitHub Pages创建博客和图片上传问题解决 date: 2017-10-22 20:44:11 tags: IT 技术 toc: true 搭建博客 博客的搭建过程完全参照小 ...

  6. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  7. KindEditor的简单使用，以及上传图片预览图片，用户删除图片后的数据处理（重点），以及 BeautifulSoup，shutil两模块了解

    KindEditor的简单了解 http://www.cnblogs.com/wupeiqi/articles/6307554.html 简单使用: <div class="comm& ...

  8. 使用HTML5 canvas做地图（3）图片加载平移放大缩小

    终于开始可以写代码了,手都开始痒了.这里的代码仅仅是在chrome检测过,我可以肯定的是IE10以下浏览器是行不通,我一直在考虑,是不是使用IE禁止看我的篇博客,就是这群使用IE的人,给我加了很多工作 ...

  9. thinkphp5项目--企业单车网站（八）（文章板块要点）（删除图片）

    thinkphp5项目--企业单车网站(八)(文章板块要点)(删除图片) 项目地址 fry404006308/BicycleEnterpriseWebsite: Bicycle Enterprise ...

随机推荐

  1. java多线程开发容易犯的错误

    昨天在社区上看到有人讨论多线程使用,多线程遇到一些问题以及一些使用技巧记录一下.为什么要使用多线程, 不能是为了用而用,和设计模式一样用的合理,会让程序更易于理解,用的不合理反而会让程序变得更难理解. ...

  2. jQuery选择器(表单元素过滤选择器)第八节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. Linux 基本命令-----常用操作分类

    Linux/Unix 命令格式: 命令名 [选项] [参数] 注:[]中的内容代表内容可以省略 例:$ ls $ ls -l #-l 是选项 开始符号: 文件名 或 文件夹名 .当前文件夹 ..上一级 ...

  4. python迭代器以及itertools模块

    迭代器 在python中,迭代器协议就是实现对象的__iter()方法和next()方法,其中前者返回对象本身,后者返回容器的下一个元素.实现了这两个方法的对象就是可迭代对象.迭代器是有惰性的,只有在 ...

  5. 【1】maven来管理我的SSM项目

    新建个maven项目,第一步当然是配置好自己需要的jar包,maven使用pom.xml管理 并不是每一个都有用,但是都是常见jar,方便以后自己调用来查找 <project xmlns=&qu ...

  6. oracle存储过程统计用户各表记录数

    declare v_tName varchar(50); v_sqlanalyze varchar(500); v_num number; v_sql varchar(500); cursor c1  ...

  7. JS--我发现，原来你是这样的JS：面向对象编程OOP[2]--(创建你的那个对象吧)

    一.介绍 我们继续面向对象吧,这次是面向对象编程的第二篇,主要是讲创建对象的模式,希望大家能从博客中学到东西. 时间过得很快,还是不断的学习吧,为了自己的目标. 二.创建对象 1.前面的创建对象方式 ...

  8. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  9. Liunx vi编辑器一些指令

    最近几天学习了Liunx vi编辑器 的使用,感觉还比较容易.总结的一点心得: vi分为3个模式,命令模式,尾行模式,编辑模式. 1. 命令模式 与 编辑模式切换 a:光标向后移动一位进入编辑模式 i ...

  10. eclipse项目中丢失的R包找回方法

    当我们项目中的R文件丢失的时候会令我们痛苦不已,怎样找回呢?总不能删了吧,那样心血会毁于一旦的,我们肯定不会那样做,那要怎么办呢?我这里提供三种方法: ​一,一般情况下这样: ​    ​方法一:选中 ...