Collection
Collection
功能实现的思路：
1、获取图片“添加”按钮，并设置其onclick事件；
2、获取页面输入的图片地址；
3、获取对图片简单样式处理的单选按钮；
4、创建用于放置图片和“上移”、“下移”“移除”按钮的容器；
5、创建图片、上移”、“下移”“移除”按钮；
6、将以上新创建的四个元素放入容器，显示在页面中。
代码如下：
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>相册在线管理功能实现</title>
<style>
body {
margin: 0;
padding:0;
}
.body {
width: 600px;
margin: 20px auto;
background-color: #EBEBEB;
border-radius: 30px;
padding: 20px;
}
h3 {
color: #9A0000;
margin-bottom: 30px;
}
button {
background-color: #9A0000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-border-radius: 5px;
border: none;
padding: 10px 25px 10px 25px;
color: #FFF;
text-shadow: 1px 1px 1px #949494;
}
button:focus {
outline: none;
}
.imgBox img{
border: 1px solid #666666;
box-shadow: 5px 5px 3px #888;
}
.imgBox button {
margin-left: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="body">
<h3 align="center">用jQuery实现简单的相册管理功能</h3>
<div class="album">
<div class="select">
<p>请输入图片地址：<input type="text" name="url"></p>
<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>
<button class="add">添加</button>
</p>
</div>
<div class="result"></div>
</div>
</div>
<script>
$('.add').on('click',function () { //获取添加按钮，并添加onclick事件
var imgUrl = $('.select input[name="url"]').val() //获取图片地址
var imgBorder = $('.select input[name="border"]:checked').val() //获取当前单选按钮的value值
var img = $('<img>').attr('src',imgUrl).width(150) //创建一个img，并设置src和width属性
img.css('border-radius',imgBorder+'px') //设置图片圆角
var imgBox = $('<div></div>') //创建一个容器来放图片
imgBox.append(img) //将图片放入图片容器中
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)
$('.result').append(imgBox) //将相片容器放入占位符中
})
</script>
</body>
</html>