本次实例是对前几天的一个总结，那么直接上代码喽，
还是先看看效果图吧
我这里放几张图片地址
https://goss.veer.com/creative/vcg/veer/800water/veer-134463449.jpg
https://goss.veer.com/creative/vcg/veer/800water/veer-134154571.jpg
https://goss.veer.com/creative/vcg/veer/800water/veer-105518518.jpg
https://goss.veer.com/creative/vcg/veer/800water/veer-108699858.jpg
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 350px;
height: 350px;
background: #d6f1f3;
padding: 5px;
margin: auto;
}
h2{
line-height: 1.2em;
text-align: center;
}
ul{
height: 204px;
width: 306px;
margin: auto;
/*border: 1px solid #696969;*/
}
li{
/*border: 1px solid #000;*/
}
ul li:first-child{
width: 300px;
height: 100px;
display: block;
margin: auto;
}
ul li:first-child button{
left:37%;
}
ul li:first-child img{
width: 300px;
height: 100px;
display: block;
margin: auto;
}
ul li:first-child ~ li{
width: 100px;
height: 100px;
float: left;
}
ul li:first-child ~ li img{
width: 100px;
height: 100px;
}
li button{
position: relative;
top: -25px;
border: 0;
opacity: 0.2;
}
input:last-child{
width: 330px;
display: block;
height: 40px;
}
ul li > button:hover{
opacity: 1;
}
</style>
</head>
<body>
<div>
<h2>照片墙</h2>
<ul>
</ul>
<p>
<form>
<label for="img_url">图片地址</label>
<input type="text" id="img_url" name=""> <br>
<label>选择样式</label>
<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><br>
<label>是否添加阴影</label>
<select name="shadow">
<option value="0" selected>不添加</option>
<option value="1">添加</option>
</select><br>
<input type="button" value="添加" name="" id="tianjia">
</form>
</p>
</div>
<script>
$('input:last-child').click(function(){
if($("#img_url").val()==''||$("#img_url").val()==' '){
alert('你已被取消上传资格，嘎嘎！')
$(this).attr("disabled","disabled");
return false
}
//图片地址
var imgurl=$("#img_url").val()
//圆角
var radio=$(':radio:checked').val() //当前的值 0\50\100
//阴影
var shadow=''
if ($(':selected').val() == 1) {
shadow = '0px 0px 15px #dde8b8'
}
console.log(shadow)
//创建img
var img = $('<img>').prop('src',imgurl)
.width(90)
.height(90)
.css({
'border-radius': radio,
'box-shadow': shadow
})
//创建几个按钮
var before = $('<button>').text('前移').click(function() {
$(this).parent().prev().before($(this).parent())
});
var after = $('<button></button').text('后移').click(function() {
$(this).parent().next().after($(this).parent())
});
var remove = $('<button></button').text('删除').click(function() {
$(this).parent().remove()
});
//创建li
var li= $("<li>").append(img,before,after,remove)
$('ul').append(li)
$("#img_url").val(" ")
if($('li').length==4){
$(this).attr("disabled","disabled")
$(this).val('添加完毕')
}
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
