17-1实战_jquery实现在线相册管理

伐梅培扫经输莆秦锋北掳吼献

目录结构：

17-1实战_jquery实现在线相册管理第1张

17-1实战_在线相册管理册(上).html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery实战之在线相册管理器</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/demo.js"></script>
	</head>
	<body>
		<div class="wrap">
			<div class="header">
				<h2>在线相册管理</h2>
				<p>
					<label for="img_url">请输入图片地址</label>
					<input type="text" name="img_url" id="img_url" placeholder="images/demo.jpg" />
				</p>
				<p>
					请选择图片类型
					<input type="radio" name="border" id="rect" value="0"checked=""/><label for="rect">矩形</label>
					<input type="radio" name="border" id="radius" value="1"/><label for="radius">圆角</label>
					<input type="radio" name="border" id="circle" value="2"/><label for="circle">矩形</label>
				</p>
				<p>
					图片是否添加阴影
					<select name="shadow">
						<option value="0" selected="selected">不添加</option>
						<option value="1">添加</option>
					</select>
				</p>
				<p>
					<button class="add">添加图片</button>
				</p>
			</div>
			<div class="main">
				<ul></ul>
			</div>
		</div>
	</body>
</html>

style.css

.wrap
{
	background-color:lightyellow;
	border: 1px solid #cecece;
	width:360px;
	height:auto;
	margin:40px auto;
}
.wrap .header
{
	padding:15px;
}
.wrap .header h2
{
	text-align: center;
}
.add
{
	width:100px;
	height:30px;
	border: none;
	cursor: pointer;
	background: coral;
	color: white;
}
.add:hover
{
	background-color: lightblue;
	font-size: 1.1em;
}
.main
{
	background-color: lightgreen;
	overflow: hidden;
}
.main ul
{
	margin:0px;
	padding:0px;
}
.main ul li
{
	list-style: none;
	float:left;
	margin-left:20px;
	margin-bottom:10px;
	width:150px;
	height:200px;
	text-align: center;
}

demo.js

1.获取图片的相关信息

$(document).ready(function(){
	$("button.add").on('click',function(){
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		console.log(img_url)
	})
})

执行，输入：images/zly.jpg 点击添加图片，查看console

17-1实战_jquery实现在线相册管理第2张

如果用户没有选择图片则提示用户，并将焦点移动到图片地址处

$(document).ready(function(){
	$("button.add").on('click',function(){
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
	
	})
})

执行：

17-1实战_jquery实现在线相册管理第3张

2.获取图片类型

$(document).ready(function(){
	$("button.add").on('click',function(){
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		console.log(img_type)
	
	})
})

执行，分别选择矩形，圆角，圆形再点击添加图片

17-1实战_jquery实现在线相册管理第4张

3.是否添加阴影

$(document).ready(function(){
	$("button.add").on('click',function(){
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		console.log(shadow)
	})
})

执行，分别点击不添加，添加，再点击添加图片

17-1实战_jquery实现在线相册管理第5张

第二步：创建图片元素，并把相关的属性添加上

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
		console.log(img)
		
	})
})

执行，点击添加图片，成功创建图片元素

17-1实战_jquery实现在线相册管理第6张

给图片添加相关属性，并添加移动和删除按钮：

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
				.prop('src',img_url)
				.width(150)
				.height(150)
				.css({
					'border-radius':img_type,
					'box-shadow':shadow
				})
					
		//给相册添加移动和删除功能
		var before=$("<button>").text('前移')
		var after=$("<button>").text('后移')
		var remove=$("<button>").text('删除')
		
		//将三个按钮添加到图片后面 将图片 三个按钮添加到创建的li内容的后面，即li里面
		var li=$('<li>').append(img,before,after,remove)
		
		//将li添加到ul里面
		li.appendTo('ul')
	})
})

执行，输入图片地址，点击不同的选项，再点击生成图片

17-1实战_jquery实现在线相册管理第7张

获取前移按钮

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
				.prop('src',img_url)
				.width(150)
				.height(150)
				.css({
					'border-radius':img_type,
					'box-shadow':shadow
				})
					
		//给相册添加移动和删除功能
		var before=$("<button>").text('前移')
		var after=$("<button>").text('后移')
		var remove=$("<button>").text('删除')
		
		//将三个按钮添加到图片后面 将图片 三个按钮添加到创建的li内容的后面，即li里面
		var li=$('<li>').append(img,before,after,remove)
		
		//将li添加到ul里面
		li.appendTo('ul')
		
		//前移: 将前一个图片做为插入点,在此之前插入当前图片
		before.click(function(){
			console.log($(this))
		})
	})
})

执行，点击前移，可以看到$(this)指代的是当前按钮

17-1实战_jquery实现在线相册管理第8张

前移操作的实现原理：

注意，前移的是li，即button的父元素

17-1实战_jquery实现在线相册管理第9张

前移即位置对调，即将江疏影的li移动到前一个li即赵丽颖的li标签的前面

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
				.prop('src',img_url)
				.width(150)
				.height(150)
				.css({
					'border-radius':img_type,
					'box-shadow':shadow
				})
					
		//给相册添加移动和删除功能
		var before=$("<button>").text('前移')
		var after=$("<button>").text('后移')
		var remove=$("<button>").text('删除')
		
		//将三个按钮添加到图片后面 将图片 三个按钮添加到创建的li内容的后面，即li里面
		var li=$('<li>').append(img,before,after,remove)
		
		//将li添加到ul里面
		li.appendTo('ul')
		
		//前移: 将前一个图片做为插入点,在此之前插入当前图片
		before.click(function(){
			//将自己的父元素li移动到当前button的父元素li的前一个元素li的标签的前面 
			$(this).parent().prev().before($(this).parent())
		})
	})
})

执行，点击江疏影下方的前移按钮，即将江疏影前移

17-1实战_jquery实现在线相册管理第10张

后移: 将下一个图片做为插入点,在此之后插入当前图片

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
				.prop('src',img_url)
				.width(150)
				.height(150)
				.css({
					'border-radius':img_type,
					'box-shadow':shadow
				})
					
		//给相册添加移动和删除功能
		var before=$("<button>").text('前移')
		var after=$("<button>").text('后移')
		var remove=$("<button>").text('删除')
		
		//将三个按钮添加到图片后面 将图片 三个按钮添加到创建的li内容的后面，即li里面
		var li=$('<li>').append(img,before,after,remove)
		
		//将li添加到ul里面
		li.appendTo('ul')
		
		//前移: 将前一个图片做为插入点,在此之前插入当前图片
		before.click(function(){
			//将自己的父元素li移动到当前button的父元素li的前一个元素li的标签的前面 
			$(this).parent().prev().before($(this).parent())
		})
		
		//后移: 将下一个图片做为插入点,在此之后插入当前图片
		after.click(function(){
			//将自己的父元素li移动到当前button的父元素li的后一个元素li的标签的后面 
			$(this).parent().next().after($(this).parent())
		})
	})
})

执行，点击赵丽颖下方的后移按钮，将赵丽颖后移

17-1实战_jquery实现在线相册管理第11张

删除操作实现

$(document).ready(function(){
	$("button.add").on('click',function(){
		//第一步:获取相关属性信息
		//1.获取图片的相关信息
		var img_url=$('#img_url').val()
		//如果用户没有选择图片则提示用户，并将焦点移动到图片地址处
		if(img_url.length==0)
		{
			alert('请选择一张图片')
			$('#img_url').focus()
			//结束代码
			return false
		}
		//2.获取图片类型
		var img_type=$(':radio:checked').val()
		
		//3.是否添加阴影
		var shadow="none"
		if($(":selected").val()==1)
		{
			shadow="3px 3px 3px #666"
		}
		
		//第二步：创建图片元素，并把相关的属性添加上
		var img=$("<img>")
				.prop('src',img_url)
				.width(150)
				.height(150)
				.css({
					'border-radius':img_type,
					'box-shadow':shadow
				})
					
		//给相册添加移动和删除功能
		var before=$("<button>").text('前移')
		var after=$("<button>").text('后移')
		var remove=$("<button>").text('删除')
		
		//将三个按钮添加到图片后面 将图片 三个按钮添加到创建的li内容的后面，即li里面
		var li=$('<li>').append(img,before,after,remove)
		
		//将li添加到ul里面
		li.appendTo('ul')
		
		//前移: 将前一个图片做为插入点,在此之前插入当前图片
		before.click(function(){
			//将自己的父元素li移动到当前button的父元素li的前一个元素li的标签的前面 
			$(this).parent().prev().before($(this).parent())
		})
		
		//后移: 将下一个图片做为插入点,在此之后插入当前图片
		after.click(function(){
			//将自己的父元素li移动到当前button的父元素li的后一个元素li的标签的后面 
			$(this).parent().next().after($(this).parent())
		})
		
		//删除
		remove.click(function(){
			//将自己的父元素li移动到当前button的父元素li的后一个元素li的标签的后面 
			$(this).parent().remove()
		})
	})
})

执行，点击江疏影下方的删除，成功删除江疏影

17-1实战_jquery实现在线相册管理第12张

修改main div背景色

17-1实战_jquery实现在线相册管理第13张

点击下方，在线测试：

在线相册演示

砷腿舅洞四串娘铆下赔山撵傻