jQuery：实战: 武林高手在线相册：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>武林排名榜</title>
<style>
*{margin:0;padding:0;}
.header{
width:450px;
height:auto;
margin: 50px 100px;
background:#eeeeee;
border-radius:10px;
border:3px double lightcoral;
overflow:hidden;
}
.header .warp{
text-align:center;
width:380px;
margin:auto;
height:220px;
border-bottom:3px solid orange;
padding:20px;
}
.header .warp h2{
font-size:22px;
color:#555;
line-height:40px;
border-bottom:1px solid #999;
}
.header .warp p{
margin: 20px 0;
}
.header .warp p input[class*='img_type']{
margin-left: 10px;
}
.header .warp p span[class*='span']{
margin-left: 5px;
}
.header .warp strong{
color:#666;
font-size: 14px;
}
.header .warp p button{
border:none;
height:35px;
width:120px;
border-radius:10px;
color:#fff;
background-color: lightgreen;
cursor:pointer;
}
.header .warp p button:hover{
background:limegreen;
color: white;
font-size:16px;
}
.main{
/*margin-top:20px;*/
padding:20px;
}
.main ul li{
margin-left: 20px;
margin-bottom: 10px;
width: 180px;
height: 200px;
list-style: none;
float:left;
}
.main ul li button{
width:50px;
margin-left:10px;
border:none;
background-color: lightgreen;
border-radius:5px;
}
.main ul li button:hover{
background:mediumvioletred;
cursor:pointer;
color:#fff;
}
</style>
</head>
<body>
<div class="header">
<div class="warp">
<h2>江湖女侠排行榜</h2>
<p>
<strong>请输入图片地址：</strong>
<input type="file" class="img_url" placeholder="图片地址">
</p>
<p>
<strong>图片类型：</strong>
<input type="radio" name="img_type" class="img_type" value="0"><span class="span">直角</span>
<input type="radio" name="img_type" class="img_type" value="10%"><span class="span">圆角</span>
<input type="radio" name="img_type" class="img_type" value="50%"><span class="span">圆形</span>
</p>
<p>
<strong>是否添加阴影:</strong>
<select name="select">
<option value="0">否</option>
<option value="1">是</option>
</select>
</p>
<p>
<button type="button" name="button" class="add">添加图片</button>
</p>
</div>
<div class="main">
<ul></ul>
</div>
</div>
<script src="jquery/lib/jquery.js"></script>
<script>
// 获取焦点，去掉点击的边框
$('button').focus(function () {
$(this).css("outline",'none');
})
// 点击事件
$('button').on('click',function () {
// 获取图片信息
let img_url = $('.img_url').val();
if(!img_url){
alert('图片不能为空');
$(this).focus();
return false;
}
// 获取图类型
let img_type = $(':radio:checked').val();
// 获取图片添加阴影
let shadows = 'none';
if($('select').val() === '1'){
shadows = '4px 0px 11px lightgreen';
}
// console.log('http://php.top/images/'+img_url.split('\\')[2]);
img_url = 'http://php.top/images/'+img_url.split('\\')[2];
// 创建img
let img = $('<img>').prop('src',img_url).height(150).width(180).css({
'box-shadow': shadows,
'border-radius' : img_type
});
// 创建三个前移，后移，删除功能标签
let before = $('<button></button>').text('前移');
let after = $('<button></button>').text('后移');
let remove = $('<button></button>').text('删除');
// 创建li
let contaier = $('<li>').append(img,before,after,remove);
// 把元素插入ul中
contaier.appendTo('ul');
// console.log(contaier);
// 三个小功能
// 前移
before.click(function(){
// 获取当前元素的父级元素 也就是li
let current = $(this).parent();
// 前一个li节点
let prev = current.prev();
// 点击前移，就把prev元素的索引，往后面移
prev.before(current);
});
// 后移
after.click(function(){
// 获取当前元素的父级元素 也就是li
let current = $(this).parent();
// 获取后面的元素节点
let next = current.next();
// 点击后移，就把next元素的索引，往后面移
next.after(current);
});
// 删除
remove.click(function () {
if (confirm('确认删除吗?')) {
$(this).parent().remove();
}
return false;
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
