Html+Css+JQuery實現簡易英雄聯盟官網

  我在簡書也發佈相同內容，如果喜歡黑色代碼背景可以去看一下

  我半年前學習過前端了，現在已經忘了差不多了。從Head Frist Html開始看書，瞭解一下Css以及JavaScript;也買了幾本書來看。但因爲時間問題，也沒有認真去打一個項目去鞏固一下基礎，都是打一百多行的代碼來實現一下小Demo。並且也沒系統的學習一下JavaScript和Jquery。隨着時間的過去，自己學得後端知識越多，對前端忘得越厲害，時常性去複習一下，也是有必要的。
  現在前端也出現了挺多框架來加快後端程序員的開發，例如EasyUi,Bootstrap,AdminLTE 等等，但其中也是換湯不換藥，其中的所調用的類以及函數或多或少都有前面技術的影子，並且其中的案例大多數模板化。所以先將之前的技術學好，再拿到這些開源的框架去開發，日後可以修改源代碼來滿足自己的需求。面對複雜的網頁界面以及需求分析也不會感到太大的壓力。以各大網站的模板來照着打，更深的理解前端的知識，會更加結構化去解析問題。寫一個隨筆來記錄一下自己遇到的問題以及心得。

前端 Demo Github地址

login.jsp
index.js  index.css
main.js   main.css

效果圖：

Html主要要點及心得：

• 在構建網頁佈局的時候想清楚組件的佈局
  組件的大小，位置，繼承關係 是必須要考慮的因素
  而在打Demo的過程中，我發現官網的的例子都有一定的特點 例如：在下面的html結構中，
  1、location-size用於定義組件的位置、大小、padding以及margin；
  2、title-css用於定義標題的大小以及css 讓背景變得更加美觀
  3、title用於定義主標題以及副標題
  4、#tilte_id 使組件易於與後臺的數據進行交互來更新其中的li
  5、#tilte_id>li 設置對應的Css樣式以及JS,如果用鼠標移動到對應li上會使下面的內容也變化
  6、context用於定義內容的大小以及位置
  7、context_id 使組件易於與後臺的數據進行交互來更新其中的li
  8、#context_id>li 設置對應的Css樣式以及JS。
  9、如果有其他內容加入可以修改li來增加功能

<div class='location-size'>
  <div class='title-cs'>
      <div class='tilte'>
          <ul id='#tilte_id'>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
          .....
      </div>
  </div>
  <div class='context'>
           <ul id=#context_id">
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
            .....
  </div>
</div>

Css主要要點

• 熟練掌握各種Css的表達式以及效果
  在實現頭部導航欄的中，需要將導航欄放在在背景圖片之前需要將

x > .other 代表x中所有other類
x > p 代表x中所有p的元素
.x .other 代表x以及子元素中所有other類
#x > p 代表id爲x中所有p的元素

position: absolute;/*大多數用於初期定義組件的情況*/
position: relative;/*用於在大組件定義子組件的情況*/
margin: 0 auto;/*居中顯示*/
z-index: 10;/*如果多個組件在同一位置 0 代表底層 越高代表離用戶越近*/
float:left;/*列表水平顯示*/
box-sizing: border-box;/*並排放置元素*/
background:linear-gradient(rgba(0,0,0,1), rgba(0, 0, 0, 0));/*漸變色 black-> apparent*/
li:hover/*鼠標移動到li上*/

• 圖片以及圖標的顯示
  看了樣例，加載圖片以及Icon都是一次直接加載比較大的圖片，而圖片中有許多小圖標，通過**background-position: -216px -99px; width: 22px;height: 26px;**來進行分割和顯示

    /*各個icon 佈局*/
.right-nav-i1,.right-nav-i2,.right-nav-i3,.right-nav-i4,.right-nav-i5,right-nav-i6{
    width: 22px;
    height: 26px;
    display: inline-block;
    vertical-align: middle;
    background-image: url(//game.gtimg.cn/images/lol/v3/comm-spr.png);
    background-size: 393px 200px;
    background-repeat: no-repeat;
}

.right-nav-i1{
    background-position: -216px -99px;

}

• 右邊的導航欄

.right-nav{
    right: 0;
    margin: 0;
    padding: 0;
    width: 70px;
    height: auto;
    box-sizing: border-box;
    /*	來源於W3school
  fixed:生成絕對定位的元素，相對於瀏覽器窗口進行定位。
        元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
  absolute:生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
         元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
  relative:生成相對定位的元素，相對於其正常位置進行定位。
                  因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
  inherit:規定應該從父元素繼承 position 屬性的值。*/
    position: fixed;
    overflow: hidden;
    bottom: 18%;/*離底部最低位置*/
    background-color: #fff;
    border-radius: 9px 0 0 9px;
    z-index: 199;
}

Jquery主要要點

• 輪播圖的實現

     //主界面輪播 start
    var index = 0;
    var time = 3000;
    var timer = null;
    var length = $('.prome-title-list').children.length;//有多少張圖片
    var width = 820;//1張圖片長度 一共有5張

    auto();//無腦自動循環

    //輪播圖下面的標題被 鼠標移入
    $('.prome-title-list span').hover(function () {
        //暫停輪播效果
        clearInterval(timer);
        //獲得標題的index
        index = $(this).index();
        //將這個標題添加一個select的類 其他標題移除這個select類
        $(this).addClass("span_select").siblings().removeClass("span_select");
        //根據下標將 輪播畫面 移動到 該圖片的位置上
        $(".prome-item-list").animate({left: -index * width}, 300);

    }, function () {
        //鼠標移出
        auto(timer);
    });

    function auto() {
        timer = setInterval(function () {
            //3s切換下個圖片以及標題
            nextPicture();
            nextTile();
        }, time);
    }

    function nextPicture() {
        index++;
        if (index >= 5) {
            /*$(".prome-item-list").animate({left:-(index)*width},300);*/
            index = 0;
            $(".prome-item-list").animate({left: 0}, 0);
        }

        $('.prome-item-list').animate({left: -index * width}, 300);
    }

    function nextTile() {
        $('.prome-title-list span').eq(index).addClass("span_select").siblings().removeClass("span_select");
    }
    function prePicture() {
        index--;
        if (index < 0) {
            index = length;
            $(".prome-item-list").animate({left: -(index) * width}, 0);
        }

        $('.prome-item-list').animate({left: -index * width}, 500);
    }

• 鼠標移動出現子面板

 //鼠標移到標題 則下面的面板提示會滑出
    $(".head-nav-ul").mouseover(function () {
            $('.head-nav-sub').slideDown(130);
        });
    //鼠標在滑出出的面板中 不會回退
    $(".head-nav-sub").mouseover(function () {
        $('.head-nav-sub').show();
    });
    //鼠標移出的面板 面板消失 
    $('.head-nav-sub').mouseout(function () {
        $('.head-nav-sub').hide();
    })