动态相册管理器-2019年5月21日21点00分

下面将展示代码及效果图
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>私人相册案例</title>
    <script src="static/js/jquery-3.4.1.js"></script>

    <style>
        .warp {
            width: 360px;
            height: auto;
            background-color: linen;
            border: 3px double grey;
            color: #363636;
            border-radius: 2%;
            box-shadow: 2px 2px 2px #888;
        }
        .warp .header {
            padding: 15px;
        }
        .warp .header h2 {
            text-align: center;
        }
        .add {
            width: 100px;
            height: 30px;
            border: none;
            cursor: pointer;
            background-color: deepskyblue;
            color: white;
        }
        .add:hover {
            background-color: orange;
            font-size: 1.1rem;
        }
        .main {
            overflow: hidden;
        }

        .main ul {
            padding: 0;
            margin: 0;
        }

        .main ul li {
            list-style-type: none;
            float: left;
            margin-left: 20px;
            margin-bottom: 10px;
            width: 150px;
            height: 200px;
            text-align: center;
        }

        .main ul li button {
            margin: 3px;
            border: none;
            border-radius: 5%;
            background-color: deepskyblue;
        }
        .main ul li button:hover {
            background-color: orange;
            color: white;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div class="warp">
    <div class="header">
        <h2>私人相册</h2>
        <p>
            <label for="img_url">输入图片地址</label>
            <input type="file" name="img_url" id="img_url" placeholder="图片地址">
        </p>
        <p>
            图片类型:
            <input type="radio" id="rect" name="border" value="0" checked><label for="rect">直角</label>
            <input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label>
            <input type="radio" id="circle" name="border" value="50%"><label for="circle">圆形</label>
        </p>
        <p>
            <label for="shadow">是否添加阴影:</label>
            <select name="shadow" id="shadow">
                <option value="0" selected>不添加</option>
                <option value="1">添加</option>
            </select>
        </p>
        <p><button class="add">添加图片</button></p>
    </div>
    <div class="main">
        <ul>
            <!--            <li>-->
            <!--                <img src="http://html.io/0521/static/images/2.jpg" alt="" width="150">-->
            <!--                <button>前移</button>-->
            <!--                <button>后移</button>-->
            <!--                <button>删除</button>-->
            <!--            </li>-->
        </ul>
    </div>

    <script>
  $(function () {

      $('button.add').on('click',function () {
   //1.第一步 先获取数据
          var img_url=$('#img_url').val();
          if (img_url.length===0){
              alert('请上传图片');
              img_url.focus();
              return false;
          }
          var img_type=$('input[type="radio"]:checked').val();
          var shadow='none';
          if ($(':selected').val()===1){
              shadow='2px 2px 2px #888';
          }
          //2.实际操作
          console.log(img_url);
          var realImgUrl=img_url.split('\\')[2];
          console.log(realImgUrl);
          //拼接
          img_url='http://html.io/0521/static/images/'+realImgUrl;
          console.log(img_url);

          var img=$('<img>').attr({
              src:img_url,
              width:150,
              height:150,
              alt:'明星相册'
          })
              .css({
                  'border-radius':img_type,
                  'box-shadow':shadow
              });

          //创建三个按钮
          var before=$('<button></button>').text('前移');
          var after = $('<button></button>').text('后移');
          var remove = $('<button></button>').text('删除');

          var contatier=$('<li>');
          contatier.append(img,before,after,remove);
          contatier.appendTo('ul');
          //3.三个功能
          before.on('click',function () {
              var current=$(this).parent();
              var prev=current.prev();
              prev.before(current);
          });
          after.on('click',function () {
              var current = $(this).parent();
              var next = current.next();
              next.after(current);
          });
          remove.on('click',function () {
              if (confirm('确认删除吗?')) {
                  $(this).parent().remove();
              }
              return false;
          })
      })
  })


    </script>
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
QQ图片20190607172100.png
实例

相关文章
