简易的相册编辑器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			h1{text-align: center;color: #333;}
			.box{
				width: 600px;
				height: auto;
				border: 1px solid #ccc;
				margin: 10px auto;
				overflow: hidden;
			}
			.top{
				padding: 10px;
				border: 1px dashed #ddd;
				margin: 10px;
				color: #999;
			}
			.fl{
				float: left;
			}
			.clear{clear: both;}
			.top div:nth-child(2){
				position: relative;
				margin-left: 10px;
			}
			.top input[type='file']{
				width: 48px;
			    height: 25px;
			    position: absolute;
			    top: 1px;
			    left: 1px;
			    opacity: 0;				
			}
			.top input[type='text'] {
				width: 400px;
				height: 20px;
				border: 1px solid #ccc;
				outline: none;
				padding-left: 10px;
			}
			.top #browse{
				border: 0;
				width: 50px;
				height: 25px;
				text-align: center;
				/*line-height: 25px;*/
				display: inline-block;
				background: #00B7EE;
				color: #fff;
				border-radius: 3px;

			}
			.imgStyle{
				color: #999;
				padding: 0 20px 10px 20px;
			}
			.imgStyle input[type='radio']{
				margin-left: 10px;
			}
			.footer{
				text-align: right;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				padding: 5px 0;
			}
			.footer button{
				padding: 5px 20px;
				background: #00B7EE;
				border: 0;
				color: #fff;
				border-radius: 3px;
				font-size: 14px;
				margin-right: 10px;
			}
			.imgList{padding: 10px;width: 610px;}
			.imgList .imgBox{float: left;margin-right: 10px;}
			.imgList .btnBox{
				width: 100%;
				height: 42px;
				background: #000;
				opacity: 0.6;
				margin-top: -42px;
			}
			.imgList .btnBox button{
				border: 0;
				font-size: 26px;
				color: #fff;
				font-family: "微软雅黑";
				padding: 3px 12px;
				background: #000;
				opacity: 0.6;
			}
			.imgList .btnBox button:hover{
				opacity: 1;
			}
		</style>  
	</head>
	<body>
		<h1>图片上传</h1>
		<div class="box">
			<div class="top">
				<div class="fl">缩略图: <input type="text" id="text" name="url" autofocus="autofocus" /> </div>
				<div class="fl"><label id="browse" for="browse">浏览</label><input type="file" name="file" id="file" multiple /></div>
				<div class="clear"></div>
			</div>
			<div class="imgStyle">
				图片样式：
				<input type="radio" name="border" id="zj" value="0" checked="" /><label for="zj">&nbsp;直角</label>
				<input type="radio" name="border" id="yj" value="50" /><label for="yj">&nbsp;圆角</label>
				<input type="radio" name="border" id="yx" value="100" /><label for="yx">&nbsp;圆形</label>
			</div>
			<div class="footer">
				<button id="add">添加</button>
			</div>
			<div class="imgList">
				
			</div>
		</div>
		

		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$('#file').change(function(){
			    $('#text').val($('#file').val());
			    //暂时的水平无法实现
			});
			$('#add').on('click',function() {
				//获取图片地址
				var imgUrl = $('.top input[name = "url"]').val();
				//alert(imgUrl)
				//获取图片边框
				var imgBorder = $('.imgStyle input[name = "border"]:checked').val();
				//alert(imgBorder)
				//创建一个图片元素，并将用户的图片url，添加到新元素上
				var img = $('<img>').attr('src',imgUrl).width(186);
				//设置相框的圆角，属性中需要px单位
				img.css('border-radius',imgBorder + 'px')
				//创建一个容器，用来放图片
				var imgBox = $('<div class="imgBox"></div>');
				
				//创建上移按钮
				var moveUp = $('<button><--</button>');
				//创建移除按钮
				var remove = $('<button>X</button>');
				//创建下移按钮
				var moveDown = $('<button>--></button>');
				
				//上移事件
				moveUp.on('click',function() {
					//在它前一个兄弟节点之前插入
					imgBox.prev().before(imgBox);
				})
				//移除事件
				remove.on('click',function() {
					//在它前一个兄弟节点之前插入
					imgBox.remove();
				})
				//下移事件
				moveDown.on('click',function() {
					//在它前一个兄弟节点之前插入
					imgBox.next().after(imgBox);
				})
				//创建一个容器，放按钮
				var btnBox = $('<div class="btnBox"></div>');
				//将按钮放入容器
				btnBox.append(moveUp,remove,moveDown);
				//将各个元素放入容器中
				imgBox.append(img,btnBox)
				//将容器放到页面中
				$('.imgList').append(imgBox);
			})
		</script>
	</body>
</html>
相关文章
