計(jì)劃列表 、整屏翻頁(yè)

計(jì)劃列表：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>計(jì)劃列表</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(){

//綁定增加按鈕的點(diǎn)擊事件

$('#btn1').click(function() {

//獲取文本框的內(nèi)容

var txt = $('#txt1').val();

//清空文本框的內(nèi)容

$('#txt1').val('');

//判斷文本框的內(nèi)容不允許為空

if(txt == ''){

alert('請(qǐng)輸入內(nèi)容！');

return;

}

//按照用戶輸入的內(nèi)容準(zhǔn)備好一個(gè)li列表項(xiàng)（從結(jié)構(gòu)中復(fù)制，并替換其中的文字）

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');

});

/*

//刪除的點(diǎn)擊監(jiān)聽（這種方式綁定會(huì)導(dǎo)致后增加的條目無(wú)法刪除，因?yàn)楸O(jiān)聽在頁(yè)面ready的時(shí)候綁定，還沒有產(chǎn)生后增加的條目，所以無(wú)法實(shí)現(xiàn)動(dòng)態(tài)綁定）

$('.del').click(function() {

$(this).parent().remove();

});

*/

//使用事件委托可以實(shí)現(xiàn)動(dòng)態(tài)綁定，并且性能更高

$('#list').delegate('a', 'click', function() {

//獲取點(diǎn)擊元素的class屬性的值

var handler = $(this).attr('class');

//根據(jù)class屬性的值判斷點(diǎn)的是刪除還是排序

switch(handler){

case 'del'://刪除

var txt = $(this).parent().children(':first').html();

if(confirm('你確定要?jiǎng)h除"'+txt+'"嗎？')){

$(this).parent().remove();

}

break;

case 'up'://向上

//如果當(dāng)前元素之前的元素長(zhǎng)度為0，說(shuō)明前邊沒有其它元素了

if($(this).parent().prev().length == 0){

alert('到頂了！');

return;

}

//把當(dāng)前l(fā)i插到前邊，誰(shuí)的前邊？它前一個(gè)元素的前邊

$(this).parent().insertBefore($(this).parent().prev());

break;

case 'down'://向下

//如果當(dāng)前元素之后的元素長(zhǎng)度為0，說(shuō)明后邊沒有其它元素了

if($(this).parent().next().length == 0){

alert('到底了！');

return;

}

//把當(dāng)前l(fā)i插到后邊，誰(shuí)的后邊？它后一個(gè)元素的后邊

$(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>學(xué)習(xí)html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>

<li><span>學(xué)習(xí)css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>

<li><span>學(xué)習(xí)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>


運(yùn)行效果：






整屏翻頁(yè)：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>整屏滾動(dòng)</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;//當(dāng)前是第幾屏

var timer = null;

//一開始給第一屏加淡入動(dòng)畫

$pages.eq(0).addClass('moving');

//把每一屏都設(shè)成可視區(qū)的高度

$pages.css({height:$h});

//鼠標(biāo)滾輪的滾動(dòng)事件

$(window).mousewheel(function(event, data){

//通過(guò)清除定時(shí)器實(shí)現(xiàn)函數(shù)節(jié)流，避免高頻觸發(fā)滾輪事件時(shí)一下滾動(dòng)多次

clearTimeout(timer);

timer = setTimeout(function(){

//向下滑動(dòng)是-1，向上滑動(dòng)是1

// alert(data);

if(data == -1){//向下滑動(dòng)

nowscreen++;

if(nowscreen > len -1){

nowscreen = len -1;

}

}else{//向上滑動(dòng)

nowscreen--;

if(nowscreen < 0){

nowscreen = 0;

}

}

//修改top的值實(shí)現(xiàn)翻頁(yè)

$('.pages_con').animate({top: -$h * nowscreen},300);

//設(shè)置當(dāng)前小圓點(diǎn)和其它小圓點(diǎn)的樣式

$points.eq(nowscreen).addClass('active').siblings().removeClass('active');

//當(dāng)前屏做淡入動(dòng)畫，其它屏移除樣式

$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');

},200);//延遲200毫秒是經(jīng)驗(yàn)數(shù)據(jù)

})

//點(diǎn)擊小圓點(diǎn)也實(shí)現(xiàn)翻頁(yè)和動(dòng)畫

$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)頁(yè)制作演變而來(lái)的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是Web1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(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)進(jìn)入Web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(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">

以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁(yè)，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無(wú)論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁(yè)制作，而是叫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ā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要，而且需要專業(yè)的前端工程師才能做好，這方面的專業(yè)人才近幾年來(lái)備受青睞。Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣，既有具體的技術(shù)，又有抽象的理念。簡(jiǎn)單地說(shuō)，它的主要職能就是把網(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>

<!-- 定位到屏幕右側(cè)的小圓點(diǎn) -->

<ul class="points">

<li class="active"></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>



運(yùn)行效果：


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 源站：http://fengyuanchen.github.io/viewer/ 應(yīng)用： html: 源碼上是正常...
    羊繪霖閱讀 5,687評(píng)論 0贊 2
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,132評(píng)論 0贊 2
  • 找到fullcalendar.js， 找到代碼為 isRTL：false，這句話 輸入以下幾句 monthName...
    迷你小小白閱讀 1,852評(píng)論 0贊 1
  • 單例模式 適用場(chǎng)景：可能會(huì)在場(chǎng)景中使用到對(duì)象，但只有一個(gè)實(shí)例，加載時(shí)并不主動(dòng)創(chuàng)建，需要時(shí)才創(chuàng)建 最常見的單例模式，...
    Obeing閱讀 2,311評(píng)論 1贊 10
  • 5月走了很多地方，也算對(duì)得起五月天。 拍了一些照片，留存下來(lái)，看圖說(shuō)話吧。 如果還有動(dòng)力走走看看，那就應(yīng)該到處看看...
    壹言肆韻閱讀 459評(píng)論 4贊 4

友情鏈接更多精彩內(nèi)容