Html+Css+JQuery实现简易英雄联盟官网

  我在CSDN同步更新 喜好白色代码背景的同学可去看


  我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下JavaScript和Jquery。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。
  现在前端也出现了挺多框架来加快后端程序员的开发，例如* EasyUi,Bootstrap,AdminLTE* 等等，但其中也是换汤不换药，其中的所调用的类以及函数或多或少都有前面技术的影子，并且其中的案例大多数模板化。所以先将之前的技术学好，再拿到这些开源的框架去开发，日后可以修改源代码来满足自己的需求。面对复杂的网页界面以及需求分析也不会感到太大的压力。以各大网站的模板来照着打，更深的理解前端的知识，会更加结构化去解析问题。写一个随笔来记录一下自己遇到的问题以及心得。

前端 Demo Github地址

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

效果图：

lol官网.png

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来增加功能

  

      

          

            
...
            
...
            
...
          
          .....
      
  
  

           

            
...
            
...
            
...
          
            .....
  

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

    //主界面轮播 end

• 鼠标移动出现子面板

 //鼠标移到标题 则下面的面板提示会滑出
    $(".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();
    })