計劃列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計劃列表</title>
<style type="text/css">
.list_con{
width:400px;
margin:50px auto 0;
}
.inputtxt{
width:350px;
height:30px;
border:1px solid #ccc;
padding:0px;
text-indent:10px;
}
.inputbtn{
width:40px;
height:32px;
padding:0px;
border:1px solid #ccc;
}
.list{
margin:0;
padding:0;
list-style:none;
margin-top:20px;
}
.list li{
height:30px;
line-height:30px;
border-bottom:1px solid #ccc;
}
.list li span{
float:left;
}
.list li a{
float:right;
text-decoration:none;
margin:0 10px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
//綁定增加按鈕的點擊事件
$('#btn1').click(function() {
//獲取文本框的內容
var txt = $('#txt1').val();
//清空文本框的內容
$('#txt1').val('');
//判斷文本框的內容不允許為空
if(txt == ''){
alert('請輸入內容！');
return;
}
//按照用戶輸入的內容準備好一個li列表項（從結構中復制，并替換其中的文字）
var $li = $('<li><span>' + txt + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>');
//把li追加到ul中
$li.appendTo('#list');
});
/*
//刪除的點擊監(jiān)聽（這種方式綁定會導致后增加的條目無法刪除，因為監(jiān)聽在頁面ready的時候綁定，還沒有產生后增加的條目，所以無法實現(xiàn)動態(tài)綁定）
$('.del').click(function() {
$(this).parent().remove();
});
*/
//使用事件委托可以實現(xiàn)動態(tài)綁定，并且性能更高
$('#list').delegate('a', 'click', function() {
//獲取點擊元素的class屬性的值
var handler = $(this).attr('class');
//根據(jù)class屬性的值判斷點的是刪除還是排序
switch(handler){
case 'del'://刪除
var txt = $(this).parent().children(':first').html();
if(confirm('你確定要刪除"'+txt+'"嗎？')){
$(this).parent().remove();
}
break;
case 'up'://向上
//如果當前元素之前的元素長度為0，說明前邊沒有其它元素了
if($(this).parent().prev().length == 0){
alert('到頂了！');
return;
}
//把當前l(fā)i插到前邊，誰的前邊？它前一個元素的前邊
$(this).parent().insertBefore($(this).parent().prev());
break;
case 'down'://向下
//如果當前元素之后的元素長度為0，說明后邊沒有其它元素了
if($(this).parent().next().length == 0){
alert('到底了！');
return;
}
//把當前l(fā)i插到后邊，誰的后邊？它后一個元素的后邊
$(this).parent().insertAfter($(this).parent().next());
break;
}
});
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>學習html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
<li><span>學習css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
<li><span>學習javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
</ul>
</div>
</body>
</html>
運行效果：
整屏翻頁：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整屏滾動</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
//獲取可視區(qū)的高度
var $h = $(window).height();
// alert($h);//973
var $pages = $('.pages');
var $points = $('.points li');
var len = $pages.length;//一共有幾屏
var nowscreen = 0;//當前是第幾屏
var timer = null;
//一開始給第一屏加淡入動畫
$pages.eq(0).addClass('moving');
//把每一屏都設成可視區(qū)的高度
$pages.css({height:$h});
//鼠標滾輪的滾動事件
$(window).mousewheel(function(event, data){
//通過清除定時器實現(xiàn)函數(shù)節(jié)流，避免高頻觸發(fā)滾輪事件時一下滾動多次
clearTimeout(timer);
timer = setTimeout(function(){
//向下滑動是-1，向上滑動是1
// alert(data);
if(data == -1){//向下滑動
nowscreen++;
if(nowscreen > len -1){
nowscreen = len -1;
}
}else{//向上滑動
nowscreen--;
if(nowscreen < 0){
nowscreen = 0;
}
}
//修改top的值實現(xiàn)翻頁
$('.pages_con').animate({top: -$h * nowscreen},300);
//設置當前小圓點和其它小圓點的樣式
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
//當前屏做淡入動畫，其它屏移除樣式
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
},200);//延遲200毫秒是經驗數(shù)據(jù)
})
//點擊小圓點也實現(xiàn)翻頁和動畫
$points.click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('.pages_con').animate({top: -$h*$(this).index()}, 300);
$pages.eq($(this).index()).addClass('moving').siblings().removeClass('moving');
});
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進程中，網(wǎng)頁制作是Web1.0時代的產物，那時網(wǎng)站的主要內容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后，互聯(lián)網(wǎng)進入Web2.0時代，各種類似桌面軟件的Web應用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內容更加生動，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現(xiàn)的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前會Photoshop和Dreamweaver就可以制作網(wǎng)頁，現(xiàn)在只掌握這些已經遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端開發(fā)在產品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近幾年來備受青睞。Web前端開發(fā)是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<!-- 定位到屏幕右側的小圓點 -->
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
運行效果：
