实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
<div class="top"><h2>中国富豪排行榜</h2></div>
<div class="mid">
<input type="file" name="img_url" id="img_url" placeholder="图片地址">
<p>图片类型
<input type="radio" value="0" name="type" checked>直角
<input type="radio" name="type" value="10%">圆角
<input type="radio" name="type" value="50%">圆
</p>
<p>是否添加阴影
<select name="shadow" id="">
<option value="0">添加</option>
<option value="1" checked>不添加</option>
</select>
</p>
<button type="submit">提交</button>
</div>
<div class="bottom">
<!--主内容展示区-->
<ul>
</ul>
</div>
</div>
<script src="../jquery.js"></script>
<script>
$('button').on('click',function(){
//检测是否添加图片
let img_url = $('#img_url').val();
alert(img_url);
if( img_url === 0){
alert('请输入地址');
$('.select').focus();
return false;
//h获取图片的类型
let img_type = $(':radio:checked').val();
//是否添加阴影?
let shadow = 'none';
if ($(':selected').val() === '1') {
shadow = '3px 3px 3px #666';
}
//获取图片到网页中
let img = $('<img>')
.prop('src',img_url)
.width(100)
.height(100)
.css({
'border-radius':img_type,
'box-shadow':shadow
})
let before = $('<button></button>').text('前移');
let after = $('<button></button>').text('后移');
let remove = $('<button></button>').text('删除');
let container = $('<li>');
container.append(img,before,after,remove);
container.appendTo($('ul'));
//3. 为三个操作添加功能
//前移功能:
before.click(function(){
//第一步获取到要移动的图片
let current = $(this).parent();
let prev = current.prev(); // 前一个元素
// 在前一个元素之前将当前元素插入,实际上就是交换一下位置
prev.before(current);
});
//后移功能:
after.click(function(){
//第一步获取到要移动的图片
let current = $(this).parent();
let next = current.next(); // 后一个元素
// 在后一个元素之后将当前元素插入,实际上就是交换一下位置
next.after(current);
});
//删除
remove.click(function () {
if (confirm('确认删除吗?')) {
$(this).parent().remove();
}
return false;
})
})
}})
</script>
</body>
</html>
用编辑器打不上去，只能复制到这里了。
