收藏
批改状态：合格
老师批语：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线相册管理</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.warp{
width:500px;
height:auto;
broder:1px solid #FFB888;
background-color:#FFD088;
}
.header{
padding:15px;
}
.header h2{
text-align: center;
}
.add{
width:100px;
height:25px;
background-color: #8EE891;
color:#F93937;
}
.add:hover{
background-color: #FA9869;
font-size: 1em;
color:#fff;
border:none;
cursor:pointer;
}
.main{
background-color:#FFD088;
overflow:hidden;
}
ul{
margin:0;
padding:0;
}
ul li{
float:left;
padding-left:12px;
list-style: none;
width:150px;
height:200px;
}
</style>
</head>
<body>
<div class="warp">
<div class="header">
<h2>在线相册管理</h2>
<p>
<label for="img_url">请输入图片地址：</label>
<input type="text" name="img_url" id="img_url" placeholder="/image/fbb.jpg">
</p>
<p>
选择图片类型：
<input type="radio" name="radio" id="rectangle" value="0" checked=""><label for="">矩形</label>
<input type="radio" name="radio" id="fillet" value="10%" ><label for="">圆角</label>
<input type="radio" name="radio" id="Circular" value="50%" ><label for="">圆型</label>
</p>
<p>
是否为图片添加阴影效果：
<select name="dropdown">
<option value="0" selected>不添加</option>
<option value="1">添加</option>
</select>
</p>
<p>
<button class="add">添加图片</button>
</p>
</div>
<div class="main"><ul></ul></div>
</div>
<script>
$(document).ready(function(){
$('button.add').on('click',function(){
var img_url = $('#img_url').val() //获取图片地址
if (img_url.length == 0){
alert('请选择图片')
$('#img_url').focus()
return false
}
var imgtype = $(':radio:checked').val()
var dropdown = 'none'
if ($(':selected').val() == 1) {
dropdown = '3px 3px 3px #5E5E5E'
}
var img = $('<img>')
.prop('src',img_url)
.width(150)
.height(150)
.css({
'border-radius': imgtype,
'box-shadow': dropdown
})
var before = $('<button>').text('前移')
var after = $('<button></button').text('后移')
var remove = $('<button></button').text('删除')
var li = $('<li>').append(img,before,after,remove)
li.appendTo('ul')
before.click(function() {
$(this).parent().prev().before($(this).parent())
});
after.click(function() {
$(this).parent().next().after($(this).parent())
});
remove.click(function() {
$(this).parent().remove()
});
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
