<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相册管理</title>
<script src="jquery-3.2.1.min.js"> </script>
</head>
<body>
<div>
<h2>相册管理</h2>
<div id="add">添加图片：<input type="text" id="addimg" value="01.png"></div>
<div id="shape">图片形状：
<label for="shape"><input type="radio" name="shape" value="0" id="square" >方形</label>
<label for="shape"><input type="radio" name="shape" value="30" id="fillet" >圆角</label>
<label for="shape"><input type="radio" name="shape" value="100" id="circle" >圆形</label>
</div>
<br><input type="button" id="submit" value="提交">
<div id="imgshow">
</div>
</div>
<script>
$(function(){
$('#submit').on('click',function(){
var imgsrc = $('#addimg').val();
var shape = $("input[type='radio']:checked").val();
// alert(shape);
var imgbox = $('<div></div>');
var image = $('<img src="" alt="" />');
var moveup = $('<input type = "button" value = "上移">');
var movedown = $('<input type = "button" value = "下移">');
var remove = $('<input type = "button" value = "删除">');
$(image).attr('src',imgsrc).css('border-radius',shape+'px').width(200);
$(imgbox).append(image,moveup,movedown,remove);
$('#imgshow').append($(imgbox));
$(moveup).on('click',function(){
// $(this).parent().prev().before(imgbox);
console.log(imgbox);
imgbox.prev().before(imgbox);
});
$(movedown).on('click',function(){
$(this).parent().next().after(imgbox);
});
$(remove).on('click',function(){
$(this).parent().remove();
});
});
})
</script>
</body>
</html>
博客列表 >1221相册的添加移动变形删除
1221相册的添加移动变形删除
- yestrue的博客原创转载
- 2017年12月24日 02:14:02761浏览
上一条：1221jquery ajax练习下一条：我的相册
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
