3.2 照片加载与定位

根据功能设计，可以先写好HTML结构基础，再配合CSS做出大致效果，最后用JavaScript加上各种动作。首先请看HTML代码结构。

3.2.1 HTML代码

将CSS代码保存到eg3.css文件中，JavaScript代码保存到eg3.js文件中，这样让HTML代码更加干净，详见【范例3-1】。

【范例3-1 照片展示的HTML代码】

    1.  <! DOCTYPE html>
    2.  <html>
    3.    <head>
    4.      <title>照片展示</title>
    5.      <link rel="stylesheet" href="eg3.css" type="text/css" />
    6.    </head>
    7.    <body>
    8.    <div   id="bigPhoto"><img   id="bigPhotoSrc"   src="photo01.jpg"   width="620"
        height="450" border="0" alt=""></div>
    9.    <div id="smallPhotos">
    10.     <span id="prve"></span>
    11.     <ul id="smallPhotosList">
    12.     </ul>
    13.     <span id="next"></span>
    14.  </div>
    15.  <script src="eg3.js"></script>
    16.  </body>
    17. </html>

比前面章节的范例看上去更加简洁了吧？重构的目的在于得到这样的效果，这可以说是开发人员的用户体验。

3.2.2 CSS代码

直接预览【范例3-1】肯定是乱七八糟的，在eg3.css中写好布局和定位的代码之后效果就大不一样了，如图3-2所示，CSS代码见【范例3-2】。

【范例3-2 照片展示的CSS代码】

    1.      ul, li{
    2.               list-style: none;
    3.      }
          #smallPhotos{width:620px; margin: 10px 0; }
    5.      #smallPhotosList{margin: 0 auto; width:580px; float:left; padding: 0; }
    6.      #smallPhotosList li{
    7.              float:left;                           /*左浮动*/
    8.              margin-left: 10px;                   /*左外边距10 像素*/
    9.              _margin-left:8px;                    /*这是专门针对IE6 间隙太大而设置的*/
    10.    }
    11.     #smallPhotosList img{
    12.             border:2px solid #000;
    13.             cursor:pointer;                      /*鼠标样式*/
    14.     }
    15.     #prve{
    16.               background: url(icon_prve.jpg);
    17.               height: 40px;
    18.               width:20px;
    19.              display: inline-block;             /*让span 标签变成块级元素*/
    20.             float: left;
    21.               cursor:pointer;
    22.     }
    23.     #next{
    24.               background: url(icon_next.jpg);
    25.               height:40px;
    26.               width:20px;
    27.               display: inline-block;
    28.               float: right;
    29.               cursor:pointer;
    30.    }

这些CSS再加上后面【范例3-3】的JavaScript代码，效果就大不一样了，请看图3-2加载CSS代码的前后对比。

图3-2 加载CSS代码前后

针对不同的浏览器写不同的CSS code的过程，就叫CSS hack。CSS hack的存在是因为不同的浏览器（比如IE 6、IE 7等）对CSS的解析认识不一样，会导致页面效果不同，得不到我们所需要的页面效果。这时候需要针对不同的浏览器去写不同的CSS code，让它能够同时兼容不同的浏览器。

CSS hack大致有3种表现形式，CSS类内部hack、选择器hack以及HTML头部引用（if IE）hack, CSS hack主要针对IE浏览器，有一个比较全的CSS hack表，如图3-3所示。

图3-3 比较全的CSS Hack表

图3-3是早期的hack大全，而现在很多标准浏览器（如Firefox、Chrome等）都更新很快，有些hack已经无效。在中国，各版本IE还有大量存留，下面是一些IE 6～IE 9常用CSS hack：

        <style>
            div{ display:none; margin:10px; }          /*隐藏div 通过不同的hack 将其显示*/
            .IE{display:block\9; }                       /*IE6 IE7 IE8 IE9 IE10 识别*/
            .IE6{_display:block; }                       /*IE6 识别*/
            .IE6{-color:blue; }                           /*IE6 识别*/
            .IE7{*display:block; }                       /*IE6 IE7 识别*/
            .IE7{+color:blue; }                           /*IE6 IE7 识别*/
            .IE7{#color:red; }                            /*IE6 IE7 识别*/
            .IE8910{display:block\0; }                  /*IE8910 识别*/
            :root .IE910{display:block\9; }            /*IE9 IE10 识别*/
            .other{[display:block; display:block; ]}  /*safari Chrome 等识别*/
        </style>
        <div class="IE">所有IE 识别</div>
        <div class="IE8910">IE8910 识别</div>
        <div class="IE910">IE910 识别</div>
        <div class="IE6">IE6 识别</div>
        <div class="IE7">IE7 识别</div>
        <div class="IE8">IE8 识别</div>
        <div class="other">标准浏览器识别</div>

3.2.3 JavaScript代码

随着JavaScript代码越来越长，用EditPlus工具就有些不顺手了，于是笔者改用Sublime Text 3。图3-4就是使用Sublime Text 3声明eg对象及第2章里用过的eg.$、eg.getElementsByClassName和eg.addListener三个公共方法的代码。

图3-4 用Sublime Text 3编写JavaScript代码

只要是写过对象、属性、方法，在Subilime Text 3里都会有自动完成功能，用起来很方便，除此之外，要定义一些相片数据和默认显示的照片，如【范例3-3】所示。

【范例3-3 照片展示的JavaScript代码】

    1.      //定义数据
    2.      eg.data = [
    3.               ["photo01.jpg", "thumb01.jpg"]
    4.               , ["photo02.jpg", "thumb02.jpg"]
    5.               , ["photo03.jpg", "thumb03.jpg"]
    6.               , ["photo04.jpg", "thumb04.jpg"]
    7.               , ["photo05.jpg", "thumb05.jpg"]
    8.               , ["photo06.jpg", "thumb06.jpg"]
    9.               , ["photo07.jpg", "thumb07.jpg"]
    10.             , ["photo01.jpg", "thumb01.jpg"]
    11.             , ["photo02.jpg", "thumb02.jpg"]
    12.             , ["photo03.jpg", "thumb03.jpg"]
    13.             , ["photo04.jpg", "thumb04.jpg"]
    14.             , ["photo05.jpg", "thumb05.jpg"]
    15.             , ["photo06.jpg", "thumb06.jpg"]
    16.             , ["photo07.jpg", "thumb07.jpg"]
    17.     ];
    18.    eg.showNumber = 0;                                   //默认显示
    19.    eg.groupNumber = 1;                                  //当前显示的组
    20.    eg.groupSize = 6;                                    //每组的数量
    21.     eg.showThumb = function(group){
    22.             var ul = eg.$("smallPhotosList");
    23.             ul.innerHTML = '';                           //每次显示时要清空旧的内容
    24.             var start = (group-1)*eg.groupSize;      //计算需要的data数据的开始位置
    25.             var end = group*eg.groupSize               //计算需要的data数据的结束位置
    26.             for(var i=start; (i<end&&i<eg.data.length); i++){
                        //循环数据，并根据数据生成HTML 后插入小图列表里
    27.                      var li = document.createElement("li");
    28.                      li.innerHTML = '<img src="'+eg.data[i][1]+'" id="thumb'+
                          i+'"width="80" height="40"/>';
    29.                     ul.appendChild(li);                  //追加元素
    30.             }
    31.     };
    32.     eg.init = function(){
    33.             eg.showThumb(1);                             //初始化要显示的
    34.     };
    35.     eg.init();

通过eg.init()的调用，首先初始化出第一组照片，并能够让鼠标单击小图而显示大图。eg.showThumb主要的功能就是生成指定某一组的几幅照片。

上一章目录下一章