![]EFANSSALD3US4(U4C}4K}O.png](https://img.php.cn//upload/image/369/326/841/1513934913423962.png "1513934913423962.png")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.js"></script>
<title>photo</title>
<style>
.* {
margin: 0;
padding: 0;
}
h2 {
width: 600px;
height: 30px;
margin: 0 auto;
text-align: center;
color:black;
}
.box {
width: 600px;
height: 1000px;
background-color: blanchedalmond;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>相册在线管理器</h2>
<div class="box">
<div class="album">
<p style="font-size: 1.2em;">输入图片地址 <input type="text" name="url" style="font-size: 1.2em" placeholder="请输入图片地址如：1.jpg"></p>
<p>相框类型:
<input type="radio" id="zj" name="border" value="0" checked><leave for="zj">直角</leave>
<input type="radio" id="yj" name="border" value="90"><leave for="yj">圆角</leave>
<input type="radio" id="yx" name="border" value="60"><leave for="yx">圆形</leave>
</p>
<p><button class="add">添加</button></p>
</div>
<div class="result"></div>
</div>
<script>
$('.add').on('click',function () { //获取添加按钮
var imgUrl = $('.album input[name="url"]').val() //获取图片地址（获取album下面的input name=url）
var imgBorder = $('.album input[name="border"]:checked').val() //获取相框类型（获取album下面的input name=border）
//创建一个图片元素 设置相关的url属性
var img = $('<img>').attr('src',imgUrl).width(200) //设置图片的宽度
img.css('border-radius',imgBorder+'px') //创建圆角的属性
var imgBox = $('<div style="display: block"></div>') //创建一个放图片的容器
//添加上移 下移 移除按钮
var moveUp = $('<button>上移</button>')
var moveDow = $('<button>下移</button>')
var remove = $('<button>移除</button>')
//给每个按钮添加事件
moveUp.on('click',function () {
imgBox.prev().before(imgBox)//prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素 before（）：在匹配的元素之前插入
})
moveDow.on('click',function () {
imgBox.next().after(imgBox)////next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
}) // after（）：在匹配元素之后插入
remove.on('click',function () {
imgBox.remove() //remove() 方法移除被选元素，包括所有文本和子节点
})
imgBox.append(img,moveUp,moveDow,remove) //往容器添加元素 append():向元素内部追加元素
$('.result').append(imgBox)//相片组容器放在页面中
})
</script>
</body>
</html>
本次案例 先把整个逻辑架构先搞定 然后在进行样式美化 创建 结构都有注释
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
