一. 表格操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
500px;
margin: 50px auto 0;
}
#myModal{
position:fixed;
top:0;
100%;
height: 100%;
background: rgba(0,0,0,.3);;
}
.modal{
500px;
margin: 50px auto 0;
background: #fff;
}
.close-box {
overflow: hidden;
}
.close{
float: right;
height: 20px;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="wraper">
<div class="box">
<button id="add_btn">新增大侠</button>
<table border="1" style="border-collapse:collapse;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr>
<tr>
<td>令狐冲</td>
<td>18</td>
<td>技术部</td>
<td>2300</td>
<td>
<button class="btn_del">删除</button>
|
<button class="btn_edit">编辑</button>
</td>
</tr>
<tr>
<td>张无忌</td>
<td>23</td>
<td>技术部</td>
<td>3300</td>
<td>
<button class="btn_del">删除</button>
|
<button class="btn_edit">编辑</button>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="hidden">
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<div class="close-box">
<button class="close"><span>×</span></button>
</div>
<h4 class="modal-title" id="myModalLabel">新增大侠</h4>
</div>
<div class="modal-body">
<p>姓名：<input type="text" id="username"></p>
<p>年龄：<input type="text" id="age"></p>
<p>部门：<input type="text" id="dep"></p>
<p>薪水：<input type="text" id="salary"></p>
</div>
<div class="modal-footer">
<button type="button" id="btn_close" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="btn_save" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</body>
</html>
二. 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
}
.box{
500px;
margin: 0 auto;
position: relative;
top:50px;
}
.box ul li a img{
500px;
height: 300px;
}
.box .image li{
position: absolute;
top: 0;
display: none;
}
.box ul li.active{
display: block;
}
.num{
position: absolute;
top: 270px;
left: 170px;
}
.num li{
display: inline-block;
18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 14px;
}
.btn{
30px;
height: 60px;
line-height: 60px;
text-align: center;
position: absolute;
top: 120px;
background: rgba(0,0,0, 0.4);
display: none;
}
.left{
left:0;
}
.right{
right:0;
}
.box:hover .btn{
display: block;
}
.num li.selected{
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="image">
<li class="active"><a href="javascript:void(0);"><img src="./images/111.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/222.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/333.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/444.jpg" alt=""></a></li>
<li><a href="javascript:void(0);"><img src="./images/555.jpg" alt=""></a></li>
</ul>
<ul class="num"></ul>
<div class="btn right"> > </div>
<div class="btn left"> < </div>
</div>
<script src="jquery.js"></script>
<script>
var i = 0;//初始索引值
//动态获取图片数
var img_num=$(".image li").length;
// 动态创建小圆点
for(var j=0;j<img_num;j++){
$(".num").append($("<li>"))
}
// 默认给第一个圆点选中
$(".num li").eq(0).addClass("selected");
// 手动轮播
$(".num li").mouseover(function () {
i = $(this).index();
$(this).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
});
// 往右轮播
function Go_R() {
if(i == img_num - 1){
i = -1;//重置索引值
}
i++;
$(".num li").eq(i).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
}
// 往左轮播
function Go_L(){
if(i == 0){
i = img_num;
}
i--;
$(".num li").eq(i).addClass('selected').siblings().removeClass('selected');
$(".image li").eq(i).addClass("active").siblings().removeClass("active");
}
// 自动轮播
var auto = setInterval(Go_R, 1000);
//绑定按钮
$(".right").click(Go_R);
$(".left").click(Go_L);
// 当鼠标悬浮时，停止轮播
$(".box").hover(function () {//鼠标悬浮时
clearInterval(auto);//清楚定时器
},function () {//鼠标离开时
auto = setInterval(Go_R,1000);//设置定时器
})
</script>
</body>
</html>