使用js做创建图片及删除图片 若有什…

2018-06-24 01:06:08来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

首先我们要在<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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:gulp.dest用法详解

下一篇:Zepto 无法阻止冒泡事件的解决