相册系统

自己服务器搭建演示地址;http://116.196.116.164/work2/photo.html

图片地址1.jpg 2.jpg 3.jpg 4.jpg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://116.196.116.164/work2/jquery-3.2.1.js"></script>
    <title>简易图片上传</title>
    <style>
        * {
            background-color: black;
        }
        .box{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            /*background-color: whitesmoke;*/
 }
        P{
            color: whitesmoke;
            font-weight: bolder;
        }
        button {
            color: lightgoldenrodyellow;
            border-radius: 10px;
            width: 50px;
            height: 30px;
        }
        #text{
            color: wheat;
            font-size: 1.1em;
            border-radius: 10px;
        }
        .add:hover{
            color: #00a0e9;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="header">
        <p>输入图片地址: <input id="text" type="text" name="url" placeholder="请输入图片地址"> <button class="add">添加</button>
        <p>相框类型:
            <input type="radio" id="zj" name="border" value="0" checked><label for="zj">直角</label>
            <input type="radio" id="yj" name="border" value="30"><label for="yj">圆角</label>
            <input type="radio" id="yx" name="border" value="100"><label for="yx">圆形</label>
        </p>
        </p>
    </div>
    <div class="result"></div>
</div>
<script>
    $('.add').on('click',function () {
        var imgUrl = $('.header input[name="url"]').val()
        var imgBorder = $('.header input[name="border"]:checked').val()
        var img = $('<img>').attr('src',imgUrl).width(150)
        img.css('border-radius',imgBorder+'px')
        var imgBox = $('<div></div>')

        $('.result').append(imgBox)

        var moveUp = $('<button>上移</button>')
        var moveDown = $('<button>下移</button>')
        var remove = $('<button>移除</button>')
        moveUp.on('click',function () {
            imgBox.prev().before(imgBox)
        })
        moveDown.on('click',function () {
            imgBox.next().after(imgBox)
        })
        remove.on('click',function () {
            imgBox.remove()
        })
        imgBox.append(img, moveUp,moveDown,remove)

    })
</script>
</body>
</html>