前端之jquery2

時間  2020-12-13
標籤 javascript css html 前端 java jquery 瀏覽器 前端工程師 app ide 欄目 JQuery 简体版
原文   原文鏈接

jquery屬性操做

一、html() 取出或設置html內容javascript

// 取出html內容
var $htm = $('#div1').html(); // 設置html內容
$('#div1').html('<span>添加文字</span>');

二、text() 取出或設置text內容css

// 取出文本內容
var $htm = $('#div1').text(); // 設置文本內容
$('#div1').text('<span>添加文字</span>');

三、attr() 取出或設置某個屬性的值html

// 取出圖片的地址
var $src = $('#img1').attr('src'); // 設置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

4.prop() 取出或設置某個屬性的值前端

//取出圖片的地址
var $src = $("#img01").prop("src") //設置圖片的地址和alt屬性
$("#img01").prop({src: "test.jpg", alt: "test img"});

 

元素屬性操做示例java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { var $a = $('.link'); var $img = $('#img01'); var $div = $('#div1'); // 讀取class屬性值
 console.log($a.prop('class')); // 沒有設置的屬性讀取爲空
 console.log($a.prop('title')); // 獲取是圖片的絕對地址
 console.log($img.prop('src')); //alert($img.prop('src'));
            // 設置屬性
 $a.prop({'href': 'http://www.baidu.com', 'title': '百度網連接'}); //console.log( $a.prop('title') );

            //讀取標籤內包含的內容
 console.log($a.html()); $div.html('<span>div裏面的span元素</span>'); }) </script>
</head>
<body>
<a href="#" class="link">這是一個連接</a>
<img src="images/002.jpg" id="img01" alt="水果">

<div id="div1"></div>
</body>
</html>
元素屬性操做示例

 

jquery循環

jquery循環示例jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { var $li = $('.list li'); //$li.css({'backgroundColor':'gold'});
 $li.each(function (a) { //alert(a);
                //alert( $(this).html() );
                //alert($(this).index());
                if ($(this).index() % 2 == 0) { $(this).css({'backgroundColor': 'gold'}); } }) }) </script>
</head>
<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>
jquery循環示例

圖片手風琴示例瀏覽器

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <style> * { margin: 0; padding: 0;
        } body { font-size: 12px;
        } #accordion { width: 727px; height: 350px; margin: 100px auto 0 auto; position: relative; overflow: hidden; border: 1px solid #CCC;
        } #accordion ul { list-style: none;
        } #accordion ul li { width: 643px; height: 350px; position: absolute; background: #FFF;
        } #accordion ul li span { display: block; width: 20px; height: 350px; float: left; text-align: center; color: #FFF; padding-top: 5px; cursor: pointer;
        } #accordion ul li img { display: block; float: right;
        } .bar01 { left: 0px;
        } .bar02 { left: 643px;
        } .bar03 { left: 664px;
        } .bar04 { left: 685px;
        } .bar05 { left: 706px;
        } .bar01 span { background: #09E0B5;
        } .bar02 span { background: #3D7FBB;
        } .bar03 span { background: #5CA716;
        } .bar04 span { background: #F28B24;
        } .bar05 span { background: #7C0070;
        }
    </style>
    
    <script type="text/javascript"> $(function () { var $li = $('#accordion li'); $li.click(function () { //alert($(this).html());
 $(this).animate({'left': 21 * $(this).index()}); //點擊的li前面的li向左運動到各自的位置
 $(this).prevAll().each(function () { //這裏的$(this)指的是循環選擇的每一個li
 $(this).animate({'left': 21 * $(this).index()}); }); // 第5個li在右邊的left值 727-21*1 等同於 727-21*(5-$(this).index())
                // 第4個li在右邊的left值 727-21*2 等同於 727-21*(5-$(this).index())
                // 第3個li在右邊的left值 727-21*3 等同於 727-21*(5-$(this).index())
 $(this).nextAll().each(function () { $(this).animate({'left': 727 - 21 * (5 - $(this).index())}); }); }) }) </script>
    <title>手風琴效果</title>
</head>
<body>
<div id="accordion">
    <ul>
        <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg"/></li>
        <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg"/></li>
        <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg"/></li>
        <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg"/></li>
        <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg"/></li>
    </ul>
</div>
</body>
</html>
圖片手風琴示例

 

 

jquery事件

事件函數列表：前端工程師

blur() 元素失去焦點 focus() 元素得到焦點 change() 表單元素的值發生變化 click() 鼠標單擊 dblclick() 鼠標雙擊 mouseover() 鼠標進入（進入子元素也觸發） mouseout() 鼠標離開（離開子元素也觸發） mouseenter() 鼠標進入（進入子元素不觸發） mouseleave() 鼠標離開（離開子元素不觸發） hover() 同時爲mouseenter和mouseleave事件指定處理函數 mouseup() 鬆開鼠標 mousedown() 按下鼠標 mousemove() 鼠標在元素內部移動 keydown() 按下鍵盤 keypress() 按下鍵盤 keyup() 鬆開鍵盤 load() 元素加載完畢 ready() DOM加載完成 resize() 瀏覽器窗口的大小發生改變 scroll() 滾動條的位置發生變化 select() 用戶選中文本框中的內容 submit() 用戶遞交表單 toggle() 根據鼠標點擊的次數，依次運行多個函數 unload() 用戶離開頁面

綁定事件的其餘方式app

$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); }); });

取消綁定事件ide

$(function(){ $('#div1').bind('mouseover click', function(event) { alert($(this).html()); // $(this).unbind(); $(this).unbind('mouseover'); }); });

 

自動獲取焦點的方法：

1.使用jquery綁定元素的標籤添加焦點事件

$(".input01").focus()

2.給元素添加autofocus屬性

<input type="text" name="dat01" id="input01" autofocus>

 

jquery事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { // 在得到焦點的時候作什麼事情
            /*$('#input01').focus(function(){ alert('得到焦點') })*/

            //focus 通常用來讓input元素開始就獲取焦點，只能是一個元素得到焦點
 $('#input01').focus(); $('#input01').blur(function () { // 獲取input元素的value值用 val()
                var sVal = $(this).val(); alert(sVal); }); $('#form1').submit(function () { //alert('提交');

                // 阻止默認的提交行爲
                return false; }) }) </script>
</head>
<body>
<form id="form1" action="http://www.baidu.com">
    <input type="text" name="dat01" id="input01">
    <input type="text" name="dat02" id="input02">
    <input type="submit" name="" value="提交" id="sub">
</form>
</body>
</html>
jquery事件示例

鼠標移入移除事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { // 鼠標移入，移入的子元素也會觸發
 $('.con').mouseover(function () { alert('移入'); }); $('.con').mouseout(function () { alert('移出'); }); // 鼠標移入，移入的子元素不會觸發
            /* $('.con2').mouseenter(function(){ alert('移入'); }) $('.con2').mouseleave(function(){ alert('移出'); }) 合併成下面的寫法： */ $('.con2').hover(function () { alert('移入') }, function () { alert('移出') }) }) </script>
    <style type="text/css"> .con, .con2 { width: 200px; height: 200px; background-color: gold;
        } .box, .box2 { width: 100px; height: 100px; background-color: green;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="box"></div>
</div>

<br/>
<br/>
<br/>
<br/>
<div class="con2">
    <div class="box2"></div>
</div>
</body>
</html>
鼠標移入移除事件

resize事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(window).resize(function () { var $w = $(window).width(); document.title = $w; }); </script>
</head>
<body>

</body>
</html>
resize事件

 

bind綁定事件和解綁

bind綁定事件和解綁示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { /* $('#btn').click(function(){ alert('click事件') }) */
            
            // 點擊或者鼠標移入的時候都執行綁定的函數
 $('#btn').bind('click mouseover', function () { alert('觸發事件綁定的函數'); $(this).unbind('mouseover'); }) }) </script>
</head>
<body>
<input type="button" name="" value="按鈕" id="btn">
</body>
</html>
bind綁定事件和解綁示例

 

 

主動觸發與自定義事件

主動觸發 
可以使用jquery對象上的trigger方法來觸發對象上綁定的事件。

自定義事件 
除了系統事件外，能夠經過bind方法自定義事件，而後用tiggle方法觸發這些事件。

//給element綁定hello事件
element.bind("hello",function(){ alert("hello world!"); }); //觸發hello事件
element.trigger("hello");

 

 

事件冒泡

什麼是事件冒泡

在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

事件冒泡的做用

事件冒泡容許多個操做被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可讓你在對象層的不一樣級別捕獲事件。

阻止事件冒泡
事件冒泡機制有時候是不須要的，須要阻止掉，經過 event.stopPropagation() 來阻止

阻止默認行爲

阻止表單提交

$('#form1').submit(function(event){ event.preventDefault(); })

阻止右鍵菜單

$(document).contextmenu(function(event) { event.preventDefault(); });

合併阻止操做
實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫，合併寫法能夠用

// event.stopPropagation(); // event.preventDefault(); // 合併寫法： return false;

 

事件冒泡-阻止事件冒泡示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { // event 是發生事件的時候的事件對象，使用的時候，經過第一個參數傳進來
 $('.son').click(function (event) { alert(1); //經過event對象上的stopPropagation的方法阻止事件冒泡
                //event.stopPropagation();
 }); $('.father').click(function (event) { alert(2); event.stopPropagation(); }); $('.grandfather').click(function () { alert(3); // 阻止事件冒泡和阻止默認行爲的統一寫法：
                return false; }); $(document).click(function () { alert(4); }) }) </script>
    <style type="text/css"> .grandfather { width: 300px; height: 300px; background-color: green; position: relative;
        } .father { width: 200px; height: 200px; background-color: gold;
        } .son { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 400px;
        }
    </style>
</head>
<body>
<div class="grandfather">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
</body>
</html>
事件冒泡-阻止事件冒泡示例

阻止事件冒泡-彈框/丐版示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { $('#btn').click(function () { $('.pop_con').fadeIn(); return false; }); $(document).click(function () { $('.pop_con').fadeOut(); }); $('.pop').click(function () { return false; }); $('#close').click(function () { $('.pop_con').fadeOut(); }) }) </script>
    <style type="text/css"> .pop_con { display: none;
        } .pop { position: fixed; width: 500px; height: 300px; background-color: #fff; border: 3px solid #000; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px; z-index: 9999;
        } .mask { position: fixed; width: 100%; height: 100%; background-color: #000; opacity: 0.3; filter: alpha(opacity=30); left: 0; top: 0; z-index: 9990;
        } .close { float: right; font-size: 30px;
        }
    </style>
</head>
<body>
<input type="button" name="" value="彈出" id="btn">

<div class="pop_con">
    <div class="pop"> 投資金額： <input type="text" name="">
        <a href="#" id="close" class="close">×</a>
    </div>
    <div class="mask"></div>
</div>
</body>
</html>
阻止事件冒泡-彈框/丐版示例

 

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次可讓新加入的子元素也能夠擁有相同的操做。

通常綁定事件的寫法

$(function(){ $ali = $('#list li'); $ali.click(function(event) { $(this).css({background:'red'}); }); }) ... <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委託的寫法

$(function(){ $list = $('#list'); $list.delegate('li', 'click', function(event) { $(this).css({background:'red'}); }); }) ... <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

取消事件委託

// ev.delegateTarge 委託對象 $(ev.delegateTarge).undelegate(); // 上面的例子可以使用 $list.undelegate();

 

事件委託示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> .list { background-color: gold; list-style: none; padding: 10px;
        } .list li { height: 30px; background-color: green; margin: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { /* $('.list li').click(function(){ $(this).css({'backgroundColor':'red'}); }); */

            // 新建一個li元素賦值給$li變量
            //var $li = $('<li>9</li>');

            //讓新加的li有相同的事件，須要單獨綁定
            //$li.click(....)

            // 把新建的li元素放到ul子集的最後面
            //$('.list').append($li); 
            
            //事件委託，將li要發生的事件委託給li的父級
 $('.list').delegate('li', 'click', function () { //$(this) 指的是委託的子元素
 $(this).css({'backgroundColor': 'red'}); }); var $li = $('<li>9</li>'); $('.list').append($li); }) </script>
</head>

<body>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
</body>
</html>
事件委託示例

 

jquery元素節點操做

建立節點

var $div = $('<div>'); var $div2 = $('<div>這是一個div元素</div>');

插入節點
一、append()和appendTo()：在現存元素的內部，從後面插入元素

var $span = $('<span>這是一個span元素</span>'); $('#div1').append($span); ...... <div id="div1"></div>

二、prepend()和prependTo()：在現存元素的內部，從前面插入元素

三、after()和insertAfter()：在現存元素的外部，從後面插入元素

四、before()和insertBefore()：在現存元素的外部，從前面插入元素

刪除節點

$('#div1').remove();

 

新建的節點操做示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { // 經過html的字符串的方式添加節點性能最高
            //$('#div1').html($('#div1').html()+'<a href="#">連接</a>')
            
            // 新建一個帶有屬性的a元素，把它賦值給$a
 $a = $('<a href="#">連接</a>'); // 新建一個空的a元素
 $a2 = $('<a>'); $p = $('<p>這是一個p元素</p>'); $h2 = $('<h2>這是一個h2</h2>'); $h3 = $('<h3>這是一個h3</h3>'); // 父元素內的後面放入子元素
            //$('#div1').append($a);
            //子元素放入到父元素內部的後面
 $a.appendTo($('#div1')); $('#div1').append($a2); // 父元素內的前面放入子元素
            //$('#div1').prepend($p);
            //子元素放入到父元素內部的前面
 $p.prependTo($('#div1')); //$('#div1').after($h2);
 $h2.insertAfter($('#div1')); //$('#div1').before($h3);
 $h3.insertBefore($('#div1')); }) </script>
</head>
<body>
<div id="div1">
    <h1>這是一個H1元素</h1>
</div>
</body>
</html>
新建的節點操做示例

已有的節點操做示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript"> $(function () { //$('#p1').insertBefore($('#title01'));
 $('#title01').before($('#p1')); $('#span01').appendTo($('#p1')); $('#link01').prependTo($('#p1')); $('#title01').remove(); }) </script>
</head>
<body>
<h1 id="title01">這是一個H1元素</h1>
<p id="p1">這是一個p元素</p>

<span id="span01">這是一個span元素</span>
<a href="#" id='link01'>連接</a>
</body>
</html>
已有的節點操做示例

todolist(計劃列表)實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css"> .list_con { width: 600px; margin: 50px auto 0;
        } .inputtxt { width: 550px; 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: 40px; line-height: 40px; 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 () { var $inputtxt = $('#txt1'); var $btn = $('#btn1'); var $ul = $('#list'); $btn.click(function () { // 獲取input輸入框的內容
                var $val = $inputtxt.val(); if ($val == "") { alert('請輸入內容'); return; } var $li = $('<li><span>' + $val + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>'); /* var $a = $li.find('.del'); $a.click(function(){ $(this).parent().remove(); })*/ $ul.append($li); $inputtxt.val(""); }); /* $('.del').click(function(){ $(this).parent().remove(); })*/ $ul.delegate('a', 'click', function () { var $handler = $(this).prop('class'); if ($handler == 'del') { $(this).parent().remove(); } if ($handler == 'up') { if ($(this).parent().prev().length == 0) { alert('到頂了！'); return; } $(this).parent().insertBefore($(this).parent().prev()); } if ($handler == 'down') { if ($(this).parent().next().length == 0) { alert('到底了！'); return; } $(this).parent().insertAfter($(this).parent().next()); } }) }) </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>
todolist(計劃列表)實例

 

 

滾輪事件與函數節流

jquery.mousewheel插件使用
jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可使用jquery的滾輪事件插件jquery.mousewheel.js。

函數節流
javascript中有些事件的觸發頻率很是高，好比onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，能夠巧妙地使用定時器來減小觸發的次數，實現函數節流。

 

整屏滾動實例
整屏滾動.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 () { var $screen = $('.pages_con'); var $pages = $('.pages'); var $len = $pages.length; var $h = $(window).height(); var $points = $('.points li'); var timer = null; var $nowscreen = 0; $pages.css({'height': $h}); $pages.eq(0).addClass('moving'); $points.click(function () { $nowscreen = $(this).index(); $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); $screen.animate({'top': -$h * $nowscreen}, 300); $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); }) $(window).mousewheel(function (event, dat) { clearTimeout(timer); timer = setTimeout(function () { if (dat == -1) { $nowscreen++; } else { $nowscreen--; } if ($nowscreen < 0) { $nowscreen = 0; } if ($nowscreen > $len - 1) { $nowscreen = $len - 1; } $screen.animate({'top': -$h * $nowscreen}, 300); $pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving'); $points.eq($nowscreen).addClass('active').siblings().removeClass('active'); }, 200) }) }) </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前端開發是從網頁製做演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製做是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行爲也以瀏覽爲主。 </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年之後，互聯網進入Web2.0時代，各類相似桌面軟件的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁再也不只是承載單一的文字和圖片，各類富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式爲用戶提供了更好的使用體驗，這些都是基於前端技術實現的。 </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就能夠製做網頁，如今只掌握這些已經遠遠不夠了。不管是開發難度上，仍是開發方式上，如今的網頁製做都更接近傳統的網站後臺開發，因此如今再也不叫網頁製做，而是叫Web前端開發。 </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前端開發在產品開發環節中的做用變得愈來愈重要，並且須要專業的前端工程師才能作好，這方面的專業人才近幾年來備受青睞。Web前端開發是一項很特殊的工做，涵蓋的知識面很是廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。 </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>
View Code

test.css

body, ul { margin: 0; padding: 0;
} ul { list-style: none;
} .pages_con { position: fixed; left: 0; top: 0; width: 100%; overflow: hidden;
} .pages { height: 600px; position: relative;
} .page1 { background-color: orange;
} .page2 { background-color: lightgreen;
} .page3 { background-color: cyan;
} .page4 { background-color: pink;
} .page5 { background-color: lightblue;
} .points { width: 16px; height: 176px; position: fixed; right: 20px; top: 50%; margin-top: -88px;
} .points li { width: 13px; height: 13px; margin: 16px 0; border-radius: 50%; border: 1px solid #666; cursor: pointer;
} .points li.active { background-color: #666;
} .main_con { width: 900px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -450px; margin-top: -200px;
} .main_con .left_img { width: 363px; height: 400px; float: left; position: relative; left: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms;
} .main_con .right_info { width: 500px; height: 300px; margin-top: 50px; float: right; font-family: 'Microsoft Yahei'; font-size: 20px; line-height: 50px; color: #666; text-indent: 2em; text-align: justify; position: relative; right: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms;
} .moving .main_con .left_img { left: 0; opacity: 1; filter: alpha(opacity=100);
} .moving .main_con .right_info { right: 0; opacity: 1; filter: alpha(opacity=100);
} .main_con .right_img { width: 522px; height: 400px; float: right; position: relative; top: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms;
} .main_con .left_info { width: 350px; height: 300px; margin-top: 50px; float: left; font-family: 'Microsoft Yahei'; font-size: 20px; line-height: 50px; color: #666; text-indent: 2em; text-align: justify; position: relative; bottom: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms;
} .moving .main_con .right_img { top: 0; opacity: 1; filter: alpha(opacity=100);
} .moving .main_con .left_info { bottom: 0; opacity: 1; filter: alpha(opacity=100);
} .main_con .center_img { width: 611px; height: 337px; position: absolute; left: 50%; margin-left: -305px; bottom: -50px; opacity: 0; filter: alpha(opacity=0); transition: all 1000ms ease 300ms;

} .moving .main_con .center_img { bottom: 0; opacity: 1; filter: alpha(opacity=100);
}
test.css

jquery.mousewheel.js    //網上找

/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh) * Licensed under the MIT License (LICENSE.txt). * * Version: 3.1.12 * * Requires: jQuery 1.2.2+ */ (function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module.
        define(['jquery'], factory); } else if (typeof exports === 'object') { // Node/CommonJS style for Browserify
        module.exports = factory; } else { // Browser globals
 factory(jQuery); } }(function ($) { var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'], toBind = ('onwheel' in document || document.documentMode >= 9) ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'], slice = Array.prototype.slice, nullLowestDeltaTimeout, lowestDelta; if ($.event.fixHooks) { for (var i = toFix.length; i;) { $.event.fixHooks[toFix[--i]] = $.event.mouseHooks; } } var special = $.event.special.mousewheel = { version: '3.1.12', setup: function () { if (this.addEventListener) { for (var i = toBind.length; i;) { this.addEventListener(toBind[--i], handler, false); } } else { this.onmousewheel = handler; } // Store the line height and page height for this particular element
            $.data(this, 'mousewheel-line-height', special.getLineHeight(this)); $.data(this, 'mousewheel-page-height', special.getPageHeight(this)); }, teardown: function () { if (this.removeEventListener) { for (var i = toBind.length; i;) { this.removeEventListener(toBind[--i], handler, false); } } else { this.onmousewheel = null; } // Clean up the data we added to the element
            $.removeData(this, 'mousewheel-line-height'); $.removeData(this, 'mousewheel-page-height'); }, getLineHeight: function (elem) { var $elem = $(elem), $parent = $elem['offsetParent' in $.fn ? 'offsetParent' : 'parent'](); if (!$parent.length) { $parent = $('body'); } return parseInt($parent.css('fontSize'), 10) || parseInt($elem.css('fontSize'), 10) || 16; }, getPageHeight: function (elem) { return $(elem).height(); }, settings: { adjustOldDeltas: true, // see shouldAdjustOldDeltas() below
            normalizeOffset: true  // calls getBoundingClientRect for each event
 } }; $.fn.extend({ mousewheel: function (fn) { return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel'); }, unmousewheel: function (fn) { return this.unbind('mousewheel', fn); } }); function handler(event) { var orgEvent = event || window.event, args = slice.call(arguments, 1), delta = 0, deltaX = 0, deltaY = 0, absDelta = 0, offsetX = 0, offsetY = 0; event = $.event.fix(orgEvent); event.type = 'mousewheel'; // Old school scrollwheel delta
        if ('detail' in orgEvent) { deltaY = orgEvent.detail * -1; } if ('wheelDelta' in orgEvent) { deltaY = orgEvent.wheelDelta; } if ('wheelDeltaY' in orgEvent) { deltaY = orgEvent.wheelDeltaY; } if ('wheelDeltaX' in orgEvent) { deltaX = orgEvent.wheelDeltaX * -1; } // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
        if ('axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS) { deltaX = deltaY * -1; deltaY = 0; } // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
        delta = deltaY === 0 ? deltaX : deltaY; // New school wheel delta (wheel event)
        if ('deltaY' in orgEvent) { deltaY = orgEvent.deltaY * -1; delta = deltaY; } if ('deltaX' in orgEvent) { deltaX = orgEvent.deltaX; if (deltaY === 0) { delta = deltaX * -1; } } // No change actually happened, no reason to go any further
        if (deltaY === 0 && deltaX === 0) { return; } // Need to convert lines and pages to pixels if we aren't already in pixels
        // There are three delta modes:
        // * deltaMode 0 is by pixels, nothing to do
        // * deltaMode 1 is by lines
        // * deltaMode 2 is by pages
        if (orgEvent.deltaMode === 1) { var lineHeight = $.data(this, 'mousewheel-line-height'); delta *= lineHeight; deltaY *= lineHeight; deltaX *= lineHeight; } else if (orgEvent.deltaMode === 2) { var pageHeight = $.data(this, 'mousewheel-page-height'); delta *= pageHeight; deltaY *= pageHeight; deltaX *= pageHeight; } // Store lowest absolute delta to normalize the delta values
        absDelta = Math.max(Math.abs(deltaY), Math.abs(deltaX)); if (!lowestDelta || absDelta < lowestDelta) { lowestDelta = absDelta; // Adjust older deltas if necessary
            if (shouldAdjustOldDeltas(orgEvent, absDelta)) { lowestDelta /= 40;
 } } // Adjust older deltas if necessary
        if (shouldAdjustOldDeltas(orgEvent, absDelta)) { // Divide all the things by 40!
            delta /= 40;
            deltaX /= 40;
            deltaY /= 40;
 } // Get a whole, normalized value for the deltas
        delta = Math[delta >= 1 ? 'floor' : 'ceil'](delta / lowestDelta); deltaX = Math[deltaX >= 1 ? 'floor' : 'ceil'](deltaX / lowestDelta); deltaY = Math[deltaY >= 1 ? 'floor' : 'ceil'](deltaY / lowestDelta); // Normalise offsetX and offsetY properties
        if (special.settings.normalizeOffset && this.getBoundingClientRect) { var boundingRect = this.getBoundingClientRect(); offsetX = event.clientX - boundingRect.left; offsetY = event.clientY - boundingRect.top; } // Add information to the event object
        event.deltaX = deltaX; event.deltaY = deltaY; event.deltaFactor = lowestDelta; event.offsetX = offsetX; event.offsetY = offsetY; // Go ahead and set deltaMode to 0 since we converted to pixels
        // Although this is a little odd since we overwrite the deltaX/Y
        // properties with normalized deltas.
        event.deltaMode = 0; // Add event and delta to the front of the arguments
 args.unshift(event, delta, deltaX, deltaY); // Clearout lowestDelta after sometime to better
        // handle multiple device types that give different
        // a different lowestDelta
        // Ex: trackpad = 3 and mouse wheel = 120
        if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); } nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200); return ($.event.dispatch || $.event.handle).apply(this, args); } function nullLowestDelta() { lowestDelta = null; } function shouldAdjustOldDeltas(orgEvent, absDelta) { // If this is an older event and the delta is divisable by 120,
        // then we are assuming that the browser is treating this as an
        // older mouse wheel event and that we should divide the deltas
        // by 40 to try and get a more usable deltaFactor.
        // Side note, this actually impacts the reported scroll distance
        // in older browsers and can cause scrolling to be slower than native.
        // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
        return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0; } }));
jquery.mousewheel.js

 

 

幻燈片

js幻燈片原理之一：
要切換幻燈片，首先將要切換來的幻燈片放到左邊/右邊，而後使用animate動畫進行移動切換；

幻燈片第一步：
使用js添加小圓點，並給第一個小圓點設爲默認添加active樣式；

var $slide = $('.slide'); //選取全部的幻燈片
    var $li = $('.slide_list li'); //獲取幻燈片的個數
    var $len = $li.length; //選擇小圓點的容器
    var $points_con = $('.points'); // 根據幻燈片的個數，動態建立小圓點
    for (var i = 0; i < $len; i++) { var $newli = $('<li>'); //第一個小圓點含有'active'的樣式
        if (i == 0) { $newli.addClass('active'); } $newli.appendTo($points_con); } //第一個幻燈片不動，將其餘的幻燈片放到右邊去
    $li.not(':first').css({'left': 760});
View Code

幻燈片第二步：
使用js控制，點擊小圓點，將就切換到對應的圖片上；

// 要運動過來的幻燈片的索引值
    var nowli = 0; // 要離開的幻燈片的索引值
    var prevli = 0; // 獲取小圓點
    var $points = $('.points li'); //小圓點點擊切換幻燈片
    $points.click(function () { nowli = $(this).index(); // 修復重複點擊的bug
        if (nowli == prevli) { return; } $(this).addClass('active').siblings().removeClass('active'); move(); })
View Code

幻燈片第三步：
點擊先後圖標切換幻燈片

var $prev = $('.prev'); var $next = $('.next'); //向前的按鈕點擊切換幻燈片
    $prev.click(function () { if (ismove) { return; } ismove = true; nowli--; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }) //向後的按鈕點擊切換幻燈片
    $next.click(function () { if (ismove) { return; } ismove = true; nowli++; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }) // 幻燈片運動函數，經過判斷nowli和prevli的值來移動對應的幻燈片
    function move() { // 第一張幻燈片往前的時候
        if (nowli < 0) { nowli = $len - 1; prevli = 0; $li.eq(nowli).css({'left': -760}); $li.eq(nowli).animate({'left': 0}); $li.eq(prevli).animate({'left': 760}, function () { ismove = false; }); prevli = nowli; return; } //最後一張幻燈片再日後的時候
        if (nowli > $len - 1) { nowli = 0; prevli = $len - 1; $li.eq(nowli).css({'left': 760}); $li.eq(nowli).animate({'left': 0}); $li.eq(prevli).animate({'left': -760}, function () { ismove = false; }); prevli = nowli; return; } ... }
View Code

幻燈片第四步：
幻燈片自動播放；鼠標移入中止，移出播放；解決用戶暴力快速點擊出現的bug，stop不夠好，使用一個巧妙的開關；


幻燈片js完整代碼

$(function () { var $slide = $('.slide'); //選取全部的幻燈片
    var $li = $('.slide_list li'); //獲取幻燈片的個數
    var $len = $li.length; //選擇小圓點的容器
    var $points_con = $('.points'); // 要運動過來的幻燈片的索引值
    var nowli = 0; // 要離開的幻燈片的索引值
    var prevli = 0; var $prev = $('.prev'); var $next = $('.next'); var timer = null; var ismove = false; // 根據幻燈片的個數，動態建立小圓點
    for (var i = 0; i < $len; i++) { var $newli = $('<li>'); //第一個小圓點含有'active'的樣式
        if (i == 0) { $newli.addClass('active'); } $newli.appendTo($points_con); } //第一個幻燈片不動，將其餘的幻燈片放到右邊去
    $li.not(':first').css({'left': 760}); // 獲取小圓點
    var $points = $('.points li'); //小圓點點擊切換幻燈片
    $points.click(function () { nowli = $(this).index(); // 修復重複點擊的bug
        if (nowli == prevli) { return; } $(this).addClass('active').siblings().removeClass('active'); move(); }); //向前的按鈕點擊切換幻燈片
    $prev.click(function () { if (ismove) { return; } ismove = true; nowli--; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }); //向後的按鈕點擊切換幻燈片
    $next.click(function () { if (ismove) { return; } ismove = true; nowli++; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); }); timer = setInterval(autoplay, 5000); $slide.mouseenter(function () { clearInterval(timer); }); $slide.mouseleave(function () { timer = setInterval(autoplay, 3000); }); function autoplay() { nowli++; move(); $points.eq(nowli).addClass('active').siblings().removeClass('active'); } // 幻燈片運動函數，經過判斷nowli和prevli的值來移動對應的幻燈片
    function move() { // 第一張幻燈片往前的時候
        if (nowli < 0) { nowli = $len - 1; prevli = 0; $li.eq(nowli).css({'left': -760}); $li.eq(nowli).animate({'left': 0}); $li.eq(prevli).animate({'left': 760}, function () { ismove = false; }); prevli = nowli; return; } //最後一張幻燈片再日後的時候
        if (nowli > $len - 1) { nowli = 0; prevli = $len - 1; $li.eq(nowli).css({'left': 760}); $li.eq(nowli).animate({'left': 0}); $li.eq(prevli).animate({'left': -760}, function () { ismove = false; }); prevli = nowli; return; } // 幻燈片從右邊過來
        if (nowli > prevli) { // 把要過來的幻燈片先放到右邊去
            $li.eq(nowli).css({'left': 760}); $li.eq(prevli).animate({'left': -760}); } else //幻燈片從左邊過來
 { // 把要過來的幻燈片先放到左邊去
            $li.eq(nowli).css({'left': -760}); $li.eq(prevli).animate({'left': 760}); } $li.eq(nowli).animate({'left': 0}, function () { ismove = false; }); prevli = nowli; } });
幻燈片js完整代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程