我的相册

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Document</title>
<style type="text/css">
.album{width:500px;margin:0 auto;}
.result{width:800px;height:640px;background:url(img/xk.jpg);}
</style>
</head>
<body>

<div>
<h1>我的相册</h1>
<div>
<p>想看哪张相片(url)：<input type="text" name="url"></p>
<p>加相框：
   <input type="radio" id="zj" name="border" value="0" checked="checked"><label for="zj">直角</label>
<input type="radio" id="yj" name="border" value="30" checked="checked"><label for="yj">圆角</label>
<input type="radio" id="yx" name="border" value="100" checked="checked"><label for="yx">圆形</label>
</p>
<p><button>打开</button></p>
</div>
<div></div>
</div>
<script>

  $('.add').on('click',function(){

var imgUrl=$('.select input[name="url"]').val()
var imgBorder=$('.select input[name="border"]:checked').val()
var img=$('<img>').attr('src',imgUrl)
    img.width(200)
    img.height(200)
    img.css('margin-left','20px')

img.css('border-radius',imgBorder+'px');
var imgBox=$('<div></div>')
imgBox.append(img)
imgBox.css('float','left');

var moveUp=$('<button>前移</button>')
var moveDown=$('<button>后移</button>')
var remove=$('<button>移除</button>')
imgBox.append(img,moveUp)
moveUp.on('click',function(){
imgBox.prev().before(imgBox)
})

moveDown.on('click',function(){
imgBox.next().after(imgBox)
})
imgBox.append(img,moveUp,moveDown)

remove.on('click',function(){
       imgBox.remove()
})
imgBox.append(img,moveUp,moveDown,remove)
$('.result').append(imgBox);
})
</script>
</body>
</html>
相关文章
