实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线相册</title>
</head>
<style>
.box{
margin: 30px auto;
padding: 10px;
width: 450px;
height: 630px;
background-color: #c7ddef;
border: #e7c3c3 double 6px;
border-radius: 30px;
}
h3,p{
color: #00ae6c;
}
button{
background-color: #a2ff97;
border: none;
border-radius: 5px;
}
.header button{
width: 85px;
}
button:hover{
background-color: #ffea7b;
}
.main ul li {
list-style-type: none;
float: left;
margin-left: 20px;
margin-bottom: 10px;
width: 150px;
height: 200px;
text-align: center;
}
</style>
<body>
<div class="box">
<div class="header">
<h3 style="text-align: center">在线相册</h3>
<p>输入图片地址：
<input type="file" name="img_url" id="img_url">
</p>
<p>图片类型：
<input type="radio" id="rect" name="border" value="0">直角
<input type="radio" id="radius" name="border" value="10%">圆角
<input type="radio" id="circle" name="border" value="50%">圆形
</p>
<p>
图片阴影：
<select name="shadow">
<option value="0">不添加</option>
<option value="1">添加</option>
</select>
</p>
<p><button class="add">添加图片</button></p>
</div>
<div class="main">
<ul>
</ul>
</div>
</div>
<script src="../lib/jquery.js"></script>
<script>
//图片计数器
let sum = 0;
$(function () {
//给按钮添加点击事件
$('button.add').on('click',function () {
let img_url = $('#img_url').val();
//判断是否选择图片
if (img_url.length === 0){
alert('请添加图片');
return false;
}
//获取图片外观
let type = $(':radio:checked').val();
//是否添加阴影
let shadow = 'none';//默认无阴影
if ($(':selected').val()=== '1'){
//添加阴影
shadow = '5px 5px 5px #666';
}
console.log(img_url);
img_url = 'http://php.io/0918/images/'+img_url.split('\\')[2];
//创建图片
console.log(sum);
if ( sum < 4){
let img = $('<img>')
.prop('src',img_url)//添加属性
.width(150)
.css({'border-radius':type,'box-shadow':shadow});
//准备三个按钮
let before = $('<button></button>').text('前移');
let after = $('<button></button>').text('后移');
let remove = $('<button></button>').text('删除');
//创建一个li存放图片和按钮
let contaier = $('<li>');
//给li添加图片和按钮
contaier.append(img,before,after,remove);
//将ul添加到li中
contaier.appendTo('ul');
//计数器+1
sum += 1;
//为三个按钮添加功能
before.click(function () {
//获取当前图片的li
let current = $(this).parent();
//获取前一个元素
let prev = current.prev();
//在前一个元素插入当前的图片
prev.before(current);
});
after.click(function () {
//获取当前图片的li
let current = $(this).parent();
//获取前一个元素
let next = current.next();
//在前一个元素插入当前的图片
next.after(current);
});
remove.click(function () {
if (confirm('确认删除吗？')){
$(this).parent().remove();
sum -= 1;
$('button.add').removeAttr('disabled');
}
});
}else {
alert('最多添加4张图片');
$('button.add').attr('disabled','true');
return false;
}
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
