收藏
批改狀態(tài)：未批改
老師批語：
jQuery：實(shí)戰(zhàn): 武林高手在線相冊：
<!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>
// 獲取焦點(diǎn)，去掉點(diǎn)擊的邊框
$('button').focus(function () {
$(this).css("outline",'none');
})
// 點(diǎn)擊事件
$('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];
// 創(chuàng)建img
let img = $('<img>').prop('src',img_url).height(150).width(180).css({
'box-shadow': shadows,
'border-radius' : img_type
});
// 創(chuàng)建三個前移，后移，刪除功能標(biāo)簽
let before = $('<button></button>').text('前移');
let after = $('<button></button>').text('后移');
let remove = $('<button></button>').text('刪除');
// 創(chuàng)建li
let contaier = $('<li>').append(img,before,after,remove);
// 把元素插入ul中
contaier.appendTo('ul');
// console.log(contaier);
// 三個小功能
// 前移
before.click(function(){
// 獲取當(dāng)前元素的父級元素 也就是li
let current = $(this).parent();
// 前一個li節(jié)點(diǎn)
let prev = current.prev();
// 點(diǎn)擊前移，就把prev元素的索引，往后面移
prev.before(current);
});
// 后移
after.click(function(){
// 獲取當(dāng)前元素的父級元素 也就是li
let current = $(this).parent();
// 獲取后面的元素節(jié)點(diǎn)
let next = current.next();
// 點(diǎn)擊后移，就把next元素的索引，往后面移
next.after(current);
});
// 刪除
remove.click(function () {
if (confirm('確認(rèn)刪除嗎?')) {
$(this).parent().remove();
}
return false;
})
})
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號