zoukankan      html  css  js  c++  java
  • 使用js做创建图片及删除图片 若有什么不对或不完整的地方,请大家提出来,谢谢

    首先我们要在<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>
  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/dzlx/p/8068042.html
Copyright © 2011-2022 走看看