相册在线变形

]EFANSSALD3US4(U4C}4K}O.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>

本次案例先把整个逻辑架构先搞定然后在进行样式美化创建结构都有注释

相关文章