图片的动态添加与动态删除

html布局css进行样式美化；代码运行结果预览 QQ截图20171222141743.png

<!DOCTYPE html>
<html>
 <meta charset="UTF-8">
 <head><title></title>
  <script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <style>
  *{
   padding:0;
   margin:0;
  }
   .select{
    width:500px;
 height:100%;
 background-color:antiquewhite;
 margin:0 auto;
 border-radius:10px;
   }
   .p1{
    width:500px;
 height:30px;
 line-height:40px;
 padding-top:20px;
 margin-left:20px;
 color:#777;
   }
   .p1 input{
    width:200px;
 height:25px;
 border-radius:5px;
   }
   .p2{
    width:500px;
 height:40px;
 margin-top:20px;
 margin-left:20px;
 color:#777;
   }
   p button{
   width:200px;
   height:35px;
   margin-left:150px;
   margin-bottom:20px;
   border-radius:5px;
   }
   #result{
    width:500px;
 height:100%;
    margin:0 auto;
 
   }
   #result img{
    box-show:5px 5px 5px #666;
   }
  </style>
 </head>
 <body>
  <div>
   <div class='select'>
  <p class="p1">请输入图片地址:&nbsp;<input type="text" name="url" value=""></p>
  <p class="p2">&nbsp;相&nbsp;框&nbsp;类&nbsp;型:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="radio" name="border"id='zj' value='0' checked><label for='zj'>直角</label>
   <input type="radio" name="border" id='yj' value="30"><label for="yj">圆角</label>
   <input type="radio" name="border" id='yx' value="100"><label for="yx">圆形</label>
  </p>
  <p><button class="add">添加</button></p>
  </div>
 <div id="result">
  
 </div>

使用jquery方法：实现图片的添加（设置添加图片显示的时间是3秒），上移，下移，删除（设置删除图片消失的时间是2秒）;

</div>
  <script>
  $(function(){
   
   $('.add').on('click',function(){
    var imgUrl=$('.select input[name="url"]').val();//获取图片地址
      // alert(imgUrl)检查是否获取到图片地址
   //获取边框
   var  borderBox=$('.select input[name="border"]:checked').val();
  // alert(borderBox)//检查是否获取到边框
   var img=$('<img>').attr('src',imgUrl);
      img.css('border-radius',borderBox+'px');
   var btnup=$('<button>上移</button>');
   var btndown=$('<button>下移</button>');
   var remove=$('<button>删除</button>');
   var imgBox=$('<div></div>');
       imgBox.append(img,btnup,btndown,remove);
    $('#result').append(imgBox).css('display','none').show(3000);//图片显示时间3秒
    btnup.on('click',function(){
      imgBox.prev().before(imgBox);
    })
    btndown.on('click',function(){
      imgBox.next().after(imgBox);
    })
    remove.on('click',function(){
      imgBox.toggle(2000);//图片删除时间是2秒
    })
  
   })
  
  })
  </script>
 </body>
</html>

相关文章