<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
