相册管理器 html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相册管理器</title> <link rel="stylesheet" href="css/style1.css" type="text/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="box"> <div class="header"> <h2>相册管理器</h2> <p> <label for="url">请输入图片地址</label> <input type="text" name="url" id="url" placeholder="例：images/demo.jpg"> </p> <p>请选择图片类型： <input type="radio" name="border" id="rect" value="0" checked=""><label>矩形</label> <input type="radio" name="border" id="radis" value="10" ><label>圆角</label> <input type="radio" name="border" id="circle" value="50" ><label>圆形</label> </p> <p>图片是都添加阴影： <select name="shadow" class="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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css
实例
body{margin: 0;
height:100%;
background-color: #16a085;
}
body,h1,h2,h3,h4,h5,p {
margin:0;
padding: 0;
font-family: "仿宋";
color: #000000;
}
.box{
width: 400px;
height: auto;
overflow: hidden;
margin:10% auto 0;
padding: 30px;
box-shadow: 0 -15px 30px #0d957a;
border-radius: 5px;
}
.header h2 {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
color: #45bda6;
text-shadow: 0 0 1px #0e947a;
margin-bottom: 15px;
}
p{
height: 40px;
font-size: 20px;
line-height: 40px;
}
#url {
height: 20px;
font-size: 20px;
line-height: 20px;
}
.shadow {
height: 25px;
font-size: 15px;
line-height: 25px;
}
.header button {
width: 100%;
height: 41px;
border: none;
font-size: 16px;
background:#048f74;
color: #f8f8f8;
cursor: pointer;
}
ul{
margin:10px;
padding: 0;
}
li{
list-style-type: none;
float: left;
margin-left: 20px;
margin-bottom: 10px;
width: 150px;
height: 200px;
text-align: center;
}
.main ul li button {
margin:3px;
border: none;
border-radius: 10%;
background-color:#f8f8f8;
cursor: pointer;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
jquery
实例
$(function(){
$('button.add').on('click',function(){
var url = $('#url').val()
if (url.length==0) {
alert('请选择一张图片')
$('#url').focus()
return false
}
var img_type=$(':radio:checked').val()
var shadow='none'
if ($(':selected').val()==1){
shadow= '3px 3px 3px #000000'
}
var img=$('<img>')
.prop('src',url)
.width(150)
.height(150)
.css({
'border-radius':img_type,
'box-shadow':shadow
})
var before = $('<button>').text('前移')
var after = $('<button>').text('后移')
var remove = $('<button>').text('删除')
var li = $('<li>').append(img,before,after,remove)
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()
});
})
})运行实例 »
点击 "运行实例" 按钮查看在线实例
Ajax post()
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax入门</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<dl class="login">
<dt>
<strong>站点后台管理系统</strong>
<em>Management System</em>
</dt>
<form action="" method="post">
<dd class="user">
<label for="user_login" class="u">U</label>
<input type="user_login" id="user1" name="user" placeholder="账号">
</dd>
<dd class="password">
<label for="pass">P</label>
<input type="pass" id="password1" name="password" placeholder="密码">
</dd>
<dd >
<input type="submit" value="立即登录" class="submit_login">
</dd>
</form>
</dl>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
var url = 'php/user.php?m=login'
var data = {
"id": $('#user1').val(),
"password": $('#password1').val()
}
var success = function(res){
if (res == '1') {
$('.submit_login').text('登录成功,正在跳转中...')
setTimeout(function(){
location.href = 'php/index.php'
},2000)
} else {
$('.submit_login').text('账号或密码错误,请重新输入...')
$('#user1').focus()
setTimeout("$('.submit_login').empty()",2000)
}
}
var dataType = 'json'
$.post(url, data, success, dataType)
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
