电子相册：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子相册</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').eq(0).click(function(){
//1.判断照片路径是否存在
if($('#imageurl').val().length==0){
alert('请输入照片路径及地址')
$('#imageurl').focus()
return false;
}
//2.获取图片边框属性
var ced = $(':radio:checked').val()
var radion = 'none'
if(ced == 1){
radion='10%';
}else if(ced ==2 ){
radion='50%';
}
//3.获取图片阴影属性
var sed = $(':selected').val()
var sbox = 'none'
if(sed=='1'){
sbox = '10px 10px 5px #888888';
}
// 4.生成图片
var img = $('<img>')
.prop('src',$('#imageurl').val())
.width('150px')
.height('150px')
.css({
'border-radius':radion,
'box-shadow':sbox
})
// 5.图片下方按钮
var before = $('<button>').text('前移')
var after = $('<button>').text('后移')
var remove = $('<button>').text('移除')
// 6.生成li元素，并添加图片/按钮
var li = $('<li>').append(img,before,after,remove);
// 7.将生成得li元素添加到UL中
li.appendTo($('ul'));
// 8.生成得按钮点击使事件
/**
* $(this).parent() 当前按钮得父级元素 li
* $(this).parent().prev() 父级元素得前一个同胞元素
* 将before按钮父级元素li插入到前一个同胞元素之前
*/
before.click(function(){
$(this).parent().prev().before($(this).parent())
})
/**
* $(this).parent() 当前按钮得父级元素 li
* $(this).parent().next() 父级元素得下一个同胞元素
* 将before按钮父级元素li插入到后一个同胞元素之后
*/
after.click(function(){
$(this).parent().next().after($(this).parent())
})
remove.click(function(){
$(this).parent().remove()
})
});
})
</script>
<style type="text/css">
.box{
border: 1px solid red;
width: 380px;
padding: 10px;
}
.main{
border: 1px solid red;
width: 380px;
padding: 10px;
overflow: hidden;
}
ul li{
list-style-type: none;
float: left;
margin-left: 3px;
margin-bottom: 10px;
width: 150px;
height: 200px;
text-align: center;
}
.main button {
margin:3px;
border: none;
border-radius: 20%;
background-color: lightgreen;;
}
</style>
</head>
<body>
<h2>JQuery电子相册</h2>
<div class="box">
<p>
<label for="imageurl">图片路径</label>
<input type="text" name="image_url" id="imageurl" placeholder="请输入照片路径及地址" value="image/1.jpg">
</p>
<p>
<label>图片外围</label>
<input type="radio" name="image_rad" value="0" checked="true">正常
<input type="radio" name="image_rad" value="1">圆角
<input type="radio" name="image_rad" value="2">圆形
</p>
<p>
<label>边框阴影</label>
<select name="image_box">
<option selected="true" value="0">不需要</option>
<option value="1">需要</option>
</select>
</p>
<p>
<button>添加照片</button>
</p>
</div>
<div class="main">
<ul></ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.Ajax入门实例
1.登陆界面
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电子相册</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.post(
'user.php?m=login',
{
'username':$('#username').val(),
'password':$('#password').val()
},
function(date){
if(date == '1'){
$('#tips').text('登陆成功')
setTimeout(function(){
location.href='3.php';
},2000)
}else{
$('#tips').text('账号错误，请重新输入')
$('#username').focus()
setTimeout("$('#username').empty()",2000)
}
},
'json'
)
return false;
})
})
</script>
<style type="text/css">
.box{
margin: auto;
background-color: #fcf;
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<form>
<p>
<label for="username">账号</label>
<input type="text" name="username" id="username" placeholder="请输入email/手机号">
</p>
<p>
<label>密码</label>
<input type="text" name="password" id="password" placeholder="请输入密码">
</p>
<p>
<button>登陆</button><span id="tips" style="font-size:1.2em;font-weight: bolder;color:red"></span>
</p>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.user.php 验证
实例
<?php
if ($_GET['m'] == 'login') {
if ($_POST['username'] == '1' && $_POST['password'] == '1'){
echo '1';
}
else {
echo '0';
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3.成功界面
