1、在线相册管理器
① demo.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery实战之相册管理器</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript" src="js/demo.js"></script> </head> <body> <div class="wrap"> <div class="header"> <h2>在线相册管理器</h2> <p> <label for="img_url">请输入图片地址：</label> <input type="text" name="img_url" id="img_url" placeholder="images/ao.png"> </p> <p>请选择图片类型： <input type="radio" name="border" value="0" checked="">直角 <input type="radio" name="border" value="10%">圆角 <input type="radio" name="border" value="50%">圆形 </p> <p>图片是否添加阴影： <select name="shadow"> <option value="0" selected>不添加</option> <option value="1">添加</option> </select> </p> <p> <button class="add">添加图片</button> </p> </div> <div class="main"> <ul></ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
②style.css
实例
.wrap{
width: 400px;
height: auto;
background-color: lightyellow;
border: 1px solid #cecece;
}
.header{
padding: 15px;
}
h2{
text-align:center;
}
.add{
width: 100px;
height: 30px;
background-color: skyblue;
color: white;
border: none;
text-align: center;
}
.add:hover{
background-color: orange;
font-size: 1.05em;
cursor: pointer;
}
.main{
overflow: hidden;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
margin-left: 20px;
margin-bottom: 10px;
width: 150px;
height: 200px;
text-align: center;s
}
ul button{
border: none;
width: 40px;
height: 30px;
background-color: lightblue;
border-radius: 10%;
margin: 3px;
cursor: pointer;
}
ul button:hover{
background-color: orange;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
③demo.js
实例
$(document).ready(function(){
$('.add').on('click',function(){
// 第一步：获取图片相关信息
// 1.获取图片地址
var img_url = $('#img_url').val()
// console.log(img_url)
// 若未选择图片则给出提示
if(img_url.length == 0){
alert("请选择一张图片")
$('#img_url').focus()
return false
}
// console.log(img_url.length)
// 2.获取图片类型
var img_type = $(':radio:checked').val()
// console.log(img_type)
//
//3.是否添加阴影
var shadow = 'none'
if($(':selected').val() == 1){
shadow = '3px 3px 3px #666'
}
// 第二步：创建图片元素
var img = $('<img>')
.prop('src',img_url)
.width(150)
.height(150)
.css({
'border-radius':img_type,
'box-shadow':shadow
})
//创建三个按钮: 前移,后移,删除
var before = $('<button>').text('前移')
var after = $('<button></button>').text('后移')
var remove = $('<button></button>').text('移除')
var li = $('<li>').append(img,before,after,remove)
// 第三步：将li添加到ul中
li.appendTo('ul')
// 前移操作
before.click(function(){
$(this).parent().prev().before($(this).parent())
})
// 后移操作
after.click(function(){
$(this).parent().next().after($(this).parent())
})
// 移除操作
remove.click(function(){
$(this).parent().remove()
})
})
})运行实例 »
点击 "运行实例" 按钮查看在线实例
