现在一直使用vue写项目,发现之前的js都很生疏了,写个小demo练下手,看一下最终效果展示

功能点:点击添加图片随机添加一张图片,图片可以拖动,可以点击删除

技能点: 主要使用了jQuery的一些方法

下面就一步一步来实现它吧

一开始我想做一个按钮可以让用户自己上传图片,结果写了之后发现没有图片上传的服务接口,也懒得去找了,就直接使用本地的图片了,这里也把图片上传的功能写一下,如果你有图片上传的api可以直接使用

 

  
         
         
           
           
       
    
        
      
         
        
          
           添加照片
          
        
                
         
    
        
  
       

 

这里我用的是本地的图片,写了一个img.js,在里面放了一些图片,图片地址都是百度找的

img.js

var list = [    {      "id": 0,      "name": "1",      "date": "2017-5-26",      "url": "http://img4.imgtn.bdimg.com/it/u=1433191751,1566568157&fm=26&gp=0.jpg"    },    ...  ]

 

接着写一个点击事件,点击添加照片的按钮网页面上加一张图片

html的写法不变,把input标签去掉,这里不需要用户上传

script写法

先把图片文件引入,这样可以拿到图片地址数组

看一下效果:

 

现在加上图片的移动和删除看看,加了图片的移动后,图片的位置就发生改动,使用上面的排列方式就没有意义.添加图片时我就直接在最后一张图片后偏移一点.这里需要限制一下图片的top和left的最大最小值,以免超出墙壁范围

 

最终的效果:

 

css代码

li {  list-style: none;}.meaasge_contanier {  width: 800px;  height: 600px;  margin: 100px auto 0;  background-color: sienna;   position: relative;  background: url('../img/board.jpg');  border: 3px solid #a25124;  border-radius: 10px;  box-shadow: 3px 3px 5px #a25124;}.meaasge_contanier .upload {  width: 120px;  height: 40px;  position: absolute;  top: 5px;  left: 5px;  text-align: center;}.meaasge_contanier .upload .plus {  width: 100%;  height: 100%;  text-align: center;  line-height: 40px;  position: absolute;  background-color: #eee;  cursor: pointer;  border-radius: 5px;}.meaasge_contanier .upload input {  width: 150px;  overflow: hidden;}.meaasge_contanier .picture_list .item {  width: 100px;  position: absolute;  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);}.meaasge_contanier .picture_list .item img {  width: 100%;}.meaasge_contanier .picture_list .item .delete {  position: absolute;  width: 20px;  height: 20px;  line-height: 17px;  text-align: center;  border-radius: 50%;  background-color: #909399;  color: #fff;  font-size: 12px;  top: -5px;  right: -5px;  display: none;  cursor: default;}