自己服务器搭建演示地址;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>