JQ在线相册-18-04-09

html部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQ在线相册</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/demo5.js"></script>
</head>
<body>
<div>
<div>
<h2>在线相册管理</h2>
<p>
<label for="img_url">请输入图片地址</label>
<input type="text" name="img_url" id="img_url" placeholder="输入图片地址" value="">
</p>
  <p>请选择图片类型:
        <input type="radio" id="rect" name="border" value="0" checked><label for="rect">直角</label>
           <input type="radio" id="radius" name="border" value="10%"><label for="radius">圆角</label>
           <input type="radio" id="circle" name="border" value="50%"><label for="circle">圆型</label>
       </p>
       <p>图片是否添加阴影:
<select name="shadow">
<option value="0" selected>不添加</option>
<option value="1">添加</option>
</select>
       </p>
   <p><button>添加图片</button></p>

</div>
<div>
<ul>

</ul>
</div>
</div>
</body>
</html>

css部分

.wrap{width: 500px; height: auto;margin: auto;border: 1px solid #cecece;}
.wrap .header{padding: 15px; background:#e273c5; }
.wrap .header h2{text-align:center; font-weight: normal; font-size: 16px; }
.wrap .header p{text-align: center;}
.add {
	width: 100px;
	height: 30px;
	border: none;
	cursor: pointer;
	background-color: skyblue;
	color: white;
}
.add:hover {
	background-color: orange;
	font-size:1.1em;
}
.main {

	overflow: hidden;
}
.main ul {
	padding: 0;
	margin: 0;
}
.main ul li {
	list-style-type: none;
	float: left;
	margin-left: 20px;
	margin-bottom: 10px;
	width: 150px;
	height: 200px;
	text-align: center;
}
.main ul li button {
	margin:3px;
	border: none;
	border-radius: 20%;
	background-color: lightgreen;;

}
.main ul li button:hover {
	background-color: orange;
	color:white;
	cursor: pointer;
}

js部分

$(function() {
//给按钮添加点击事件
$(".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></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()
		});
})


})

相关文章