<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>節(jié)點(diǎn)操作</title>
? ? <style type="text/css">
? ? </style>
? ? <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
? ? <script type="text/javascript">
? ? ? ? $(function(){
? ? ? ? ? ? var $span = $('<span>span元素</span>');
? ? ? ? ? ? var $p = $('<p>p段落元素</p>');
? ? ? ? ? ? var $h = $('<h1>頁面標(biāo)題</h1>');
? ? ? ? ? ? /*插入子元素*/
? ? ? ? ? ? //div中插入span和p（末尾追加）
? ? ? ? ? ? // $('#div1').append($span);
? ? ? ? ? ? // $('#div1').append($p);
? ? ? ? ? ? // 把span和p插入div中
? ? ? ? ? ? $span.appendTo('#div1');
? ? ? ? ? ? $p.appendTo('#div1');
? ? ? ? ? ? //把子元素插入到父元素（前面追加）
? ? ? ? ? ? // $('#div1').prepend($span);
? ? ? ? ? ? // $('#div1').prepend($p);
? ? ? ? ? ? // $span.prependTo('#div1');
? ? ? ? ? ? // $p.prependTo('#div1');
? ? ? ? ? ? //在div前邊插入兄弟h1標(biāo)題
? ? ? ? ? ? // $('#div1').before($h);
? ? ? ? ? ? $h.insertBefore('#div1');
? ? ? ? ? ? //在后邊插入兄弟元素
? ? ? ? ? ? //after()
? ? ? ? ? ? //insertAfter()
? ? ? ? ? ? //刪除p標(biāo)簽
? ? ? ? ? ? $p.remove();? ?
? ? ? ? })
? ? </script>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>
<!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(){
? ? ? ? ? ? var $h = $(window).height();
? ? ? ? ? ? var len = $('.pages').length;
? ? ? ? ? ? var $points = $('.points li');
? ? ? ? ? ? var $pages = $('.pages');
? ? ? ? ? ? var nowscreen = 0;
? ? ? ? ? ? var timer = null;
? ? ? ? ? ? $pages.eq(0).addClass('moving');
? ? ? ? ? ? $('.pages').css({height:$h});
? ? ? ? ? ? //dat的值：-1是向下滑動(dòng)铺浇，1是向上滑動(dòng)
? ? ? ? ? ? $(window).mousewheel(function(event,dat){
? ? ? ? ? ? ? ? //清掉前面剛剛開的定時(shí)器
? ? ? ? ? ? ? ? clearTimeout(timer);
? ? ? ? ? ? ? ? // 最新的一次定時(shí)器
? ? ? ? ? ? ? ? timer = setTimeout(function(){
? ? ? ? ? ? ? ? ? ? if(dat==-1)
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen++;
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen>len-1){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=len-1;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? nowscreen--;
? ? ? ? ? ? ? ? ? ? ? ? if(nowscreen<0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? nowscreen=0;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? $('.pages_con').animate({top:-$h*nowscreen},300);
? ? ? ? ? ? ? ? ? ? $points.eq(nowscreen).addClass('active').siblings().removeClass('active');
? ? ? ? ? ? ? ? ? ? $pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
? ? ? ? ? ? ? ? },200);
? ? ? ? ? ? })
? ? ? ? ? ? $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 moving">
? ? ? ? ? ? <div class="main_con">
? ? ? ? ? ? ? ? <div class="left_img"><img src="images/001.png"></div>
? ? ? ? ? ? ? ? <div class="right_info">
? ? ? ? ? ? ? ? Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征垛膝。在互聯(lián)網(wǎng)的演化進(jìn)程中鳍侣，網(wǎng)頁制作是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)頁不再只是承載單一的文字和圖片矿酵，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)唬复，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(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)頁敞咧，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上辜腺，還是開發(fā)方式上休建，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(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ā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好百匆，這方面的專業(yè)人才近幾年來備受青睞砌些。Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣，既有具體的技術(shù)存璃，又有抽象的理念仑荐。簡(jiǎn)單地說，它的主要職能就是把網(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>
