实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<title>在线相册管理</title>
<style>
.top{height: 200px;width:500px;border:1px solid lightgrey;}
button{background-color:skyblue;}
button:hover{background:orange}
.bottom ul{height:400px;width:500px;border:1px dashed lightgrey;padding:0;overflow:auto}
.bottom li{height:150px;width:100px;list-style-type:none;border:1px dashed lightblue;float:left;margin:16px 0 0 18px;text-align:center;}
.bottom li img{height:90px;width:90px;margin:auto}
</style>
</head>
<body>
<div class = "top">
<h3>图片添加区域</h3>
<p>选择图片：<input type="file" class="imgurl" /></p>
<p>图片类型：
<input type="radio" name="border" class = "border" value="0" checked="checked">直角
<input type="radio" name="border" class = "border" value="10%" >圆角
<input type="radio" name="border" class = "border" value="50%" >圆形
</p>
<p>
<select name="shadow" class = "is_shadow">
<option value=1>是否添加阴影</option>
<option value=1 selected="selected">添加</option>
<option value=0>不添加</option>
</select>
</p>
<p>
<button id="click">添加图片</button>
</p>
</div><br>
<div class ="bottom">
<ul>
</ul>
</div>
<script>
$(function(){
//禁用按钮
$('#click').attr("disabled",true);
//判断选择的是否为图片，正确则启用按钮 开始
$('.imgurl').change(function(){
$('.imgurl').val()
let allow_img = ['img','png','gif']
if(allow_img.indexOf($('.imgurl').val().substr(-3,3)) == 1){
$('#click').attr("disabled",false);
}else{
$('#click').attr("disabled",true);
alert('请选择图片')
$('.imgurl').val('')
}
});
//判断选择的是否为图片，正确则启用按钮 结束
$('#click').click(function(){
let li = $('<li>')
//创建图片元素 添加src路径和样式
let border = $('.border:checked').val()
let is_shadow = $('.is_shadow').val()
if (is_shadow === '1') {
shadow = '3px 3px 3px #666';
}
let imgurl = './images/' + $('.imgurl').val().split('\\').pop();
let img = $('<img>')
img.css({
'border-radius':border,
'box-shadow':shadow,
}).attr('src',imgurl)
//创建三个按钮并追加到li中
let button1 = $('<button>').text('前移')
let button2 = $('<button>').text('后移')
let button3 = $('<button>').text('删除')
li.append(img,button1,button2,button3)
//将整合好的li添加到ul中
$('ul').append(li)
//删除
button3.click(function(){
$(this).parent().remove()
})
//前移
button1.click(function(){
let now = $(this).parent()
now.prev().before(now)
})
//后移
button2.click(function(){
let now = $(this).parent()
now.next().after(now)
})
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
