先简单介绍下raphael.js，raphael.js是一个很小的javascript库，它可以在网页中实现绘制各种 矢量图、各类图表、以及图像裁剪、旋转、运动动画等等功能。此外raphael.js还跨浏览器兼容，而且还兼容老掉牙的IE6啊。raphael.js 的官网地址： http://raphaeljs.com/

准备工作

我们需要准备一张矢量地图，可以从网上找一张矢量地图，或者使用illustrator绘制一份矢量地图，然后导出为SVG格式的文件，这个文件可 以在浏览器上打开，然后提取里面的path路径信息（M开头的坐标）。并将path路径信息，按照chinamapPath.js的格式准备好地图路径信 息。

var china = []; 
 
function paintMap(R) { 
    var attr = { 
        "fill": "#97d6f5", 
        "stroke": "#eee", 
        "stroke-width": 1, 
        "stroke-linejoin": "round" 
    }; 
 
    china.aomen = { 
        name: "澳门", 
        path: R.path("M413.032,.........省略若干......... ,414.183z").attr(attr) 
    } 
    china.hk = { 
        //格式同上 
    }; 
} 

以上是我们将准备好的地图路径信息封装到()函数中，并保存文件名为chinamapPath.js，供后面调用。

HTML

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

<script type="text/javascript" src="raphael.js"></script> 
<script type="text/javascript" src="chinamapPath.js"></script> 

然后在body中需要放置地图的位置放置div#map。

<div id="map"></div> 

JAVASCRIPT

首先我们在页面中调用地图，方法如下：

window.onload = function () { 
    //绘制地图 
    var R = Raphael("map", 600, 500);//将地图载入到id为map的div中，并设置区域为600x500px大小。 
    paintMap(R); 
} 

这个时候我们用浏览器打开会显示载入后的地图。接下来我们要给地图中的对应的省份区域加上省份名称，以及鼠标滑向每个省份区块时的变色动画效果。

window.onload = function () { 
    var R = Raphael("map", 600, 500); 
    //调用绘制地图方法 
    paintMap(R); 
     
    var textAttr = { 
        "fill": "#000", 
        "font-size": "12px", 
        "cursor": "pointer" 
    }; 
             
            
    for (var state in china) { 
        china[state]['path'].color = Raphael.getColor(0.9); 
                 
        (function (st, state) { 
             
            //获取当前图形的中心坐标 
            var xx = st.getBBox().x + (st.getBBox().width / 2); 
            var yy = st.getBBox().y + (st.getBBox().height / 2); 
             
            //写入文字 
            china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr); 
             
            st[0].onmouseover = function () {//鼠标滑向 
                st.animate({fill: st.color, stroke: "#eee"}, 500); 
                china[state]['text'].toFront(); 
                R.safari(); 
            }; 
            st[0].onmouseout = function () {//鼠标离开 
                st.animate({fill: "#97d6f5", stroke: "#eee"}, 500); 
                china[state]['text'].toFront(); 
                R.safari(); 
            }; 
                     
         })(china[state]['path'], state); 
    } 
} 

以上代码中运用了raphael提供的方法有：getColor，getBBox，animate，toFront等等，这些可以在raphael文档中找到使用说明，本文不在讲述。

此外由于地图尺寸原因，有些省份名称在地图中的显示位置不恰当，需要修正偏移量，这样看起来舒服点。

window.onload = function () { 
    var R = Raphael("map", 600, 500); 
    ... 
    for (var state in china) { 
        ... 
        (function (st, state) { 
            .... 
            switch (china[state]['name']) { 
                case "江苏": 
                    xx += 5; 
                    yy -= 10; 
                    break; 
                case "河北": 
                    xx -= 10; 
                    yy += 20; 
                    break; 
                case "天津": 
                    xx += 10; 
                    yy += 10; 
                    break; 
                case "上海": 
                    xx += 10; 
                    break; 
                case "广东": 
                    yy -= 10; 
                    break; 
                case "澳门": 
                    yy += 10; 
                    break; 
                case "香港": 
                    xx += 20; 
                    yy += 5; 
                    break; 
                case "甘肃": 
                    xx -= 40; 
                    yy -= 30; 
                    break; 
                case "陕西": 
                    xx += 5; 
                    yy += 10; 
                    break; 
                case "内蒙古": 
                    xx -= 15; 
                    yy += 65; 
                    break; 
                default: 
            } 
            ... 
      })(china[state]['path'], state); 
   } 
} 

这样一个基本的地图效果就完成了。

本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息（本例中附加信息为车站开始售票时间）。

HTML

页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个<p>，即每个时间段开售车票的车站名。

<div id="search_box"> 
    <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　 
    <input class="sbttn" id="search_btn" type="button" value="页内查找" /> 
</div> 
<div id="content"> 
    <p><strong>8：00 起售车站</strong><br /> 
　　安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、 
齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p> 
    ....此处省略n个p 
</div> 

CSS

简单的对页面内容进行CSS设置，其中.highlight和#tip分别用来设置查找结果高亮显示和信息提示框显示的样式效果，后面我们会介绍到。

#search_box { background: white; opacity: 0.8; text-align:right } 
#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;  
width: 100px; line-height: 24px; color: white; } 
#searchstr { font-size: 14px; height: 20px; } 
.highlight { background: yellow; color: red; } 
#tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;  
display: none; font-size: 12px; } 

jQuery

首先，我们要实现一个固定div的效果，就是当页面往下拉滚动时，用于查找的输入框和按钮始终固定在页面的最顶部，方便继续查找。

(function($) { 
    $.fn.fixDiv = function(options) { 
        var defaultVal = { 
            top: 10 
        }; 
        var obj = $.extend(defaultVal, options); 
        $this = this; 
        var _top = $this.offset().top; 
        var _left = $this.offset().left; 
        $(window).scroll(function() { 
            var _currentTop = $this.offset().top; 
            var _scrollTop = $(document).scrollTop(); 
            if (_scrollTop > _top) { 
                $this.offset({ 
                    top: _scrollTop + obj.top, 
                    left: _left 
                }); 
            } else { 
                $this.offset({ 
                    top: _top, 
                    left: _left 
                }); 
            } 
        }); 
        return $this; 
    }; 
})(jQuery); 

接着，我们调用fixDiv()。

$(function(){ 
    $("#search_box").fixDiv({ top: 0 }); 
}); 

接下来，最关键的实现查找功能。当输入关键字后，点击查找按钮或按回车键，调用查找函数highlight()。

$(function(){ 
    ... 
    $('#search_btn').click(highlight);//点击search时，执行highlight函数； 
    $('#searchstr').keydown(function (e) { 
        var key = e.which; 
        if (key == 13) highlight(); 
    }) 
    ... 
}); 

在函数highlight()需要做很多事情，1.清空上次高亮显示内容，2.隐藏并清空提示信息，3.判断输入内容为空的情况，4.获取输入的关 键字，并与页面内容进行正则匹配，并用flag标记查找到结果，将查找结果高亮显示，5.根据查找结果的数量，确定提示信息的内容和位置偏移量，准确定位 并显示提示信息。请看具体代码：

$(function(){ 
    ... 
    var i = 0; 
    var sCurText; 
    function highlight(){ 
        clearSelection();//先清空一下上次高亮显示的内容； 
         
        var flag = 0; 
        var bStart = true; 
         
        $('#tip').text(''); 
        $('#tip').hide(); 
        var searchText = $('#searchstr').val(); 
        var _searchTop = $('#searchstr').offset().top+30; 
        var _searchLeft = $('#searchstr').offset().left; 
        if($.trim(searchText)==""){ 
            showTips("请输入查找车站名",_searchTop,3,_searchLeft); 
            return; 
        } 
        //查找匹配 
        var searchText = $('#searchstr').val();//获取你输入的关键字； 
        var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g， 
则查找到第一个就不会继续向下查找了； 
        var content = $("#content").text(); 
        if (!regExp.test(content)) { 
            showTips("没有找到要查找的车站",_searchTop,3,_searchLeft); 
            return; 
        } else { 
            if (sCurText != searchText) { 
                i = 0; 
                sCurText = searchText; 
             } 
        } 
        //高亮显示 
        $('p').each(function(){ 
            var html = $(this).html(); 
            //将找到的关键字替换，加上highlight属性； 
            var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>'); 
            $(this).html(newHtml);//更新； 
            flag = 1; 
        }); 
         
        //定位并提示信息 
        if (flag == 1) { 
            if ($(".highlight").size() > 1) { 
                var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height(); 
                var _tip = $(".highlight").eq(i).parent().find("strong").text(); 
                if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text(); 
                var _left = $(".highlight").eq(i).offset().left; 
                var _tipWidth = $("#tip").width(); 
                if (_left > $(document).width() - _tipWidth) { 
                     _left = _left - _tipWidth; 
                } 
                $("#tip").html(_tip).show(); 
                $("#tip").offset({ top: _top, left: _left }); 
                $("#search_btn").val("查找下一个"); 
            }else{ 
                var _top = $(".highlight").offset().top+$(".highlight").height(); 
                var _tip = $(".highlight").parent().find("strong").text(); 
                var _left = $(".highlight").offset().left; 
                $('#tip').show(); 
                $("#tip").html(_tip).offset({ top: _top, left: _left }); 
            } 
            $("html, body").animate({ scrollTop: _top - 50 }); 
            i++; 
            if (i > $(".highlight").size() - 1) { 
                i = 0; 
            } 
        } 
    } 
      ... 
}); 

上述代码中提到的clearSelection()函数用来清空高亮效果，代码如下：

function clearSelection(){ 
        $('p').each(function(){ 
            //找到所有highlight属性的元素； 
            $(this).find('.highlight').each(function(){ 
                $(this).replaceWith($(this).html());//将他们的属性去掉； 
            }); 
        }); 
} 

最后加上showTips()函数，该函数用来显示在输入查找关键字后的查找结果提示信息。

$(function(){ 
    var tipsDiv = '<div class="tipsClass"></div>';  
    $( 'body' ).append( tipsDiv ); 
    function showTips( tips, height, time,left ){  
        var windowWidth = document.documentElement.clientWidth;  
        $('.tipsClass').text(tips); 
        $( 'div.tipsClass' ).css({  
        'top' : height + 'px',  
        'left' :left + 'px',  
        'position' : 'absolute',  
        'padding' : '8px 6px',  
        'background': '#000000',  
        'font-size' : 14 + 'px',  
        'font-weight': 900, 
        'margin' : '0 auto',  
        'text-align': 'center',  
        'width' : 'auto',  
        'color' : '#fff',  
        'border-radius':'2px',  
        'opacity' : '0.8' , 
        'box-shadow':'0px 0px 10px #000', 
        '-moz-box-shadow':'0px 0px 10px #000', 
        '-webkit-box-shadow':'0px 0px 10px #000' 
        }).show();  
        setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );  
    }  
}); 

HTML

我们的页面上有一个歌曲列表，列出多行歌曲名称，并匹配复选框供用户选择，并且在列表下方有一排操作按钮。

<ul id="list">   
   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> 
   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li> 
   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li> 
   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li> 
   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li> 
   <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">   
<input type="button" value="全不选" class="btn" id="unSelect">   
<input type="button" value="反选" class="btn" id="reverse">   
<input type="button" value="获得选中的所有值" class="btn" id="getValue"> 

当然不要忘了先加载jQuery库文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery

1、全选或全不选。当勾选全选按钮#selectAll旁边的复选框#all时，列表中的选项全部选中，反之取消勾选则列表中的选项全部为未选中状态。

$("#all").click(function(){    
    if(this.checked){    
        $("#list :checkbox").attr("checked", true);   
    }else{    
        $("#list :checkbox").attr("checked", false); 
    }    
});  

2、全选。当点击全选按钮#selectAll或者勾选全选按钮旁边的复选框#all时，列表中所有的选项都会被选中，包括全选旁边的复选框也是选中状态。

$("#selectAll").click(function () { 
   $("#list :checkbox,#all").attr("checked", true);   
}); 

3、全不选。当点击全不选按钮#unSelect时，列表中所有的选项都是未选中状态，当然包括#all也是未选中状态。

$("#unSelect").click(function () {   
   $("#list :checkbox,#all").attr("checked", false);   
});  

4、反选。当点击反选按钮#reverse，列表中所有被选中的选项变为未选中状态，而所有未选中的选项变为已选中状态，当然也要注意#all的状态。

$("#reverse").click(function () {  
    $("#list :checkbox").each(function () {   
        $(this).attr("checked", !$(this).attr("checked"));   
    }); 
    allchk(); 
}); 

上述代码中遍历了选项列表，然后改变checked属性，调用函数allchk()是干什么的，别急，留在后面介绍。

5、获得选中的所有值。我们要跟后台程序交互就必须获取列表中所选项的值，我们通过遍历数组，将选中项的值存放在数组中，最后组成由逗号(,)隔开的字符串，开发者就可以通过获取这个字符串进行相应的操作了。

$("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
        valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(',');//转换为逗号隔开的字符串 
    alert(vals); 
}); 

为了完善选中选项功能，我们在单击列表中某个选项时，如果勾选的项刚好满足全部选中的条件，则#all也要相应的变为选中状态，同样，如果事先所有的选项是选中状态时，当取消勾选某个选项时，那么#all也要相应的变为未选中状态。

//设置全选复选框 
$("#list :checkbox").click(function(){ 
    allchk(); 
}); 

函数allchk()就是用来检测全选框#all应该是选中状态还是未选中状态的，请看代码。

function allchk(){ 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () {   
        if($(this).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
} 

总结

jQuery操作复选框的选中和不选中状态非常简单，使用attr()来设置"checked"属性的值，true未选中，false为未选中，在 整个全选、反选过程中注意处理全选复选框的选中状态，以及获取选中选项的值。以下我将所有jQuery代码整理在一起，供大家参考。

$(function () { 
    //全选或全不选 
    $("#all").click(function(){    
        if(this.checked){    
            $("#list :checkbox").attr("checked", true);   
        }else{    
            $("#list :checkbox").attr("checked", false); 
        }    
     });  
    //全选   
    $("#selectAll").click(function () { 
         $("#list :checkbox,#all").attr("checked", true);   
    });   
    //全不选 
    $("#unSelect").click(function () {   
         $("#list :checkbox,#all").attr("checked", false);   
    });   
    //反选  
    $("#reverse").click(function () {  
         $("#list :checkbox").each(function () {   
              $(this).attr("checked", !$(this).attr("checked"));   
         }); 
         allchk(); 
    }); 
     
    //设置全选复选框 
    $("#list :checkbox").click(function(){ 
        allchk(); 
    }); 
  
    //获取选中选项的值 
    $("#getValue").click(function(){ 
        var valArr = new Array; 
        $("#list :checkbox[checked]").each(function(i){ 
            valArr[i] = $(this).val(); 
        }); 
        var vals = valArr.join(','); 
          alert(vals); 
    }); 
});  
function allchk(){ 
    var chknum = $("#list :checkbox").size();//选项总个数 
    var chk = 0; 
    $("#list :checkbox").each(function () {   
        if($(this).attr("checked")==true){ 
            chk++; 
        } 
    }); 
    if(chknum==chk){//全选 
        $("#all").attr("checked",true); 
    }else{//不全选 
        $("#all").attr("checked",false); 
    } 
} 

Flexslider具有以下特性：

• 支持滑动和淡入淡出效果。
• 支持水平、垂直方向滑动。
• 支持键盘方向键控制。
• 支持触控滑动。
• 支持图文混排，支持各种html元素。
• 自适应屏幕尺寸。
• 可控制滑动单元个数。
• 更多选项设置和回调函数。

HTML

首先在页面head部位载入jquery库文件和Flexslider插件，以及Flexslider所需的基本css样式文件。

<link rel="stylesheet" type="text/css" href="flexslider.css" /> 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="jquery.flexslider-min.js"></script> 

然后在body中加入以下HTML代码：

<div class="flexslider"> 
      <ul class="slides"> 
        <li><img src="images/s1.jpg" /></li> 
        <li><img src="images/s2.jpg" /></li> 
        <li><img src="images/s3.jpg" /></li> 
        <li><img src="images/s4.jpg" /></li> 
      </ul> 
</div> 

我们使用了.flexslider来包括所有需要滚动的内容元素，然后使用<ul class="slides">这个class非常关键，内部的滚动内容都是针对.slides的，然后在<li>内部加入任意html元素，包括图片和文字。

jQuery

调用Flexslider插件非常简单，使用如下代码：

$(function() { 
    $(".flexslider").flexslider(); 
});     

然后预览网页效果，一个内容切换效果就完成了，当然想要更多个性化设置，flexslider提供了丰富的选项配置以及回调函数绝对可以满足大多数开发者需求。

Flexslider选项设置

参数	描述	默认值
animation	动画效果类型，有"fade"：淡入淡出，"slide"：滑动	"fade"
easing	内容切换时缓动效果，需要jquery easing插件支持	"swing"
direction	内容滚动方向，有"horizontal"：水平方向 和"vertical"：垂直方向	"horizontal"
animationLoop	是否循环滚动	true
startAt	初始滑动时的起始位置，定位从第几个开始滑动	0
slideshow	是否自动滑动	true
slideshowSpeed	滑动内容展示时间(ms)	7000
animationSpeed	内容切换时间(ms)	600
initDelay	初始化时延时时间	0
pauseOnHover	鼠标滑向滚动内容时，是否暂停滚动	false
touch	是否支持触摸滑动	true
directionNav	是否显示左右方向箭头按钮	true
keyboard	是否支持键盘方向键操作	true
minItems	一次最少展示滑动内容的单元个数	1
maxItems	一次最多展示滑动内容的单元个数	0
move	一次滑动的单元个数	0
回调函数	start: function(){}, before: function(){}, after: function(){}, end: function(){}, added: function(){}, removed: function(){}, init: function(){},	-

更多Flexslider相关信息可以访问Flexslider官网地址：http://www.woothemes.com/flexslider/

HTML

首先我们准备右侧浮动层的内容，工具条有上下箭头按钮，然后一个“反馈”链接，点击可以到网站的反馈信息页面，还有一个二维码按钮，鼠标滑上时会弹 出一个二维码图片，那么我们使用.popPanel来放置二维码图片，.arrowPanel是用来做箭头方向的。在本例中，我使用了一张背景图作为工具 条，当然实际应用中我们还可以根据实际需求加多个功能按钮。

<div id="floatPanel"> 
    <div class="ctrolPanel" style="right:20px;"> 
        <a class="arrow" href="#"><span>顶部</span></a> 
        <a class="contact" href="http://www.helloweba.com/gbook.html" target="_blank"><span>反馈</span></a> 
        <a class="qrcode" href="#"><span>二维码</span></a> 
        <a class="arrow" href="#"><span>底部</span></a> 
    </div> 
     
    <div class="popPanel" style="right:66px;"> 
        <div class="popPanel-inner"> 
            <div class="qrcodePanel"><img src="helloweba.jpg" /><p>扫描二维码用手机看文章</p></div> 
            <div class="arrowPanel"> 
                <div class="arrow01"></div> 
                <div class="arrow02"></div> 
            </div> 
        </div> 
    </div> 
</div> 

CSS

我们使用CSS来将工具条固定在右侧，position:fixed在这里发挥作用，还要注意使用z-index的值要大点，因为我们希望工具条一直能在页面其他元素的上层，也就是可以覆盖其他元素。具体请看以下代码：

#floatPanel .ctrolPanel{width:36px;height:166px;background:#fff url(panel_bg.gif) no-repeat left top;border:solid 1px #ddd;position:fixed;right:25px;top:300px;overflow:hidden;z-index:10000;} 
#floatPanel .ctrolPanel a{width:34px;font-size:12px;color:#ff6600;letter-spacing:1px;text-align:center;overflow:hidden;} 
#floatPanel .ctrolPanel .arrow{height:29px;line-height:28px;display:block;margin:1px auto;} 
#floatPanel .ctrolPanel .arrow span{display:none;} 
#floatPanel .ctrolPanel .arrow:hover{background:#f4f4f4;} 
#floatPanel .ctrolPanel .arrow:hover span{display:block;} 
#floatPanel .ctrolPanel .contact{height:60px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .contact span{line-height:90px;} 
#floatPanel .ctrolPanel .qrcode{height:40px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .qrcode span{display:none;} 
 
.popPanel{width:205px;height:214px; position:fixed;right:90px;top:300px;z-index:10000;overflow:hidden;display:none; } 
.popPanel-inner{width:205px;height:220px;position:relative;overflow:hidden;} 
.arrowPanel{width:10px;height:210px;position:absolute;right:1px;top:102px;} 
.arrowPanel .arrow01{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #ddd;position:absolute;bottom:0;position:absolute;left:2px;top:0;} 
.arrowPanel .arrow02{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #fff;position:absolute;bottom:0;position:absolute;left:0;top:0;} 
.qrcodePanel{width:194px; height:212px; background:#fff;text-align:center;border:solid 1px #ddd;position:absolute;left:0;top:0;overflow:hidden;} 
.qrcodePanel img{width:174px;height:174px;border:none;padding:5px 5px 0px 5px;} 
.qrcodePanel p{font-size:12px;color:#666;line-height:20px;letter-spacing:1px;} 

jQuery

本实例基于jQuery，因此必须先载入jQuery库，你可以使用360的前端CDN加载jQuery库文件。

<script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script> 

当点击向上箭头.arrow时，设置动画，页面滚动到页头，当点击向下箭头.arrow时，页面滚动到页底，当中使用了scrollTop，当 scrollTop的值为0时表示到页头，为页面总高度时则表示到页底。然后当鼠标滑上移动终端图标时，会向左弹出一个二维码图案，也是使用动画函数 animate()设置宽度变化达到弹出展示效果，请看详细代码：

$(function(){ 
    $("#floatPanel a.arrow").eq(0).click(function(){ 
        $("html,body").animate({scrollTop :0}, 300); 
        return false; 
    }); 
    $("#floatPanel a.arrow").eq(1).click(function(){ 
        $("html,body").animate({scrollTop : $(document).height()}, 300); 
        return false; 
    }); 
 
    var panel = $(".popPanel");     
    var w = panel.outerWidth(); 
     
    $(".qrcode").hover(function(){ 
        panel.css("width","0px").show(); 
        panel.animate({"width" : w + "px"},300); 
    },function(){ 
        panel.animate({"width" : "0px"},300); 
    }); 
     
}); 

moment.js不依赖任何第三方库，支持字符串、Date、时间戳以及数组等格式，可以像PHP的date()函数一样，格式化日期时间，计算相对时间，获取特定时间后的日期时间等等，本文有如下举例。

格式化日期

当前时间：

moment().format('YYYY-MM-DD HH:mm:ss'); //2014-09-24 23:36:09 

今天是星期几：

moment().format('d'); //3 

转换当前时间的Unix时间戳：

moment().format('X'); 

相对时间

20120901相对当前日期是2年前

moment("20120901", "YYYYMMDD").fromNow(); //2 years ago 

7天后的日期：

moment().add('days',7).format('YYYY年MM月DD日'); //2014年10月01日 

9小时后的时间：

moment().add('hours',9).format('HH:mm:ss'); 

moment.js提供了丰富的说明文档，使用它还可以创建日历项目等复杂的日期时间应用。我们日常开发中最常用的是格式化时间，下面我把常用的格式制作成表格说明供有需要的朋友查看：

格式代码	说明	返回值例子
M	数字表示的月份，没有前导零	1到12
MM	数字表示的月份，有前导零	01到12
MMM	三个字母缩写表示的月份	Jan到Dec
MMMM	月份，完整的文本格式	January到December
Q	季度	1到4
D	月份中的第几天，没有前导零	1到31
DD	月份中的第几天，有前导零	01到31
d	星期中的第几天，数字表示	0到6，0表示周日，6表示周六
ddd	三个字母表示星期中的第几天	Sun到Sat
dddd	星期几，完整的星期文本	从Sunday到Saturday
w	年份中的第几周	如42：表示第42周
YYYY	四位数字完整表示的年份	如：2014 或 2000
YY	两位数字表示的年份	如：14 或 98
A	大写的AM PM	AM PM
a	小写的am pm	am pm
HH	小时，24小时制，有前导零	00到23
H	小时，24小时制，无前导零	0到23
hh	小时，12小时制，有前导零	00到12
h	小时，12小时制，无前导零	0到12
m	没有前导零的分钟数	0到59
mm	有前导零的分钟数	00到59
s	没有前导零的秒数	1到59
ss	有前导零的描述	01到59
X	Unix时间戳	1411572969

更多有关moment.js的介绍，请访问项目官网：http://momentjs.com/

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级

通常用户看到的页面的样式会受到三层控制:

第一层是浏览器的默认样式

第二层是网页定义样式

第三层是用户自定义样式

和CSS一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过 于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。

视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; 　　这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以 从美观和可读性上来讲arial应该是完全可以接受的。

一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font- family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致 字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。

因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font- family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改 了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都 不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置 {font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。

不用考虑基于字体大小（em）的设计。

在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行 高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解 决一些特殊情况下的字体对其问题。 在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把 line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置 为无单位的数值是最佳选择。

深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

大部分平台都有arial，减少浏览器的查找时间。

代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。

所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。

中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family: \5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。 使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

 未来

通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。

虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持 Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

先看示例：http://www.helloweba.com/demo/cssfooter/demo1.html

不管浏览器的高度怎么变化，我们要想让页底内容始终固定在底部，最终效果如：http://www.helloweba.com/demo/cssfooter/demo2.html

本文提供了一个CSS解决方案。

XHTML

<div id="wrap"> 
    <div id="main"> 
    主体 
    </div> 
</div> 
 
<div id="footer"> 
   这里是页底footer内容 
</div> 

CSS

<style type="text/css"> 
* {margin:0;padding:0;}  
html, body {height: 100%;} 
#wrap {min-height: 100%;} 
#main {overflow:auto; 
    padding-bottom: 60px;}  /* 必须使用和footer相同的高度 */ 
#footer {position: relative; 
    margin-top: -60px;  
    height: 60px; 
    clear:both; 
    background:#369}  
 
/*Opera Fix*/ 
body:before { 
content:""; 
height:100%; 
float:left; 
width:0; 
margin-top:-32767px; 
} 
</style> 

注意，以上代码在IE6上根本不起作用，必须使用以下代码来解决IE6下的BUG。

<!--[if !IE 7]> 
    <style type="text/css"> 
        #wrap {display:table;height:100%} 
    </style> 
<![endif]--> 

关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。

一、旧的Opacity设置

以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement { 
-khtml-opacity: .5;  
-moz-opacity: 0.5;  }  

-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。

二、在Firefox, Safari, Chrome和Opera下的CSS透明度

以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：

#myElement { opacity: .7; }  

上述语法将设置一个元素为70％不透明（或30%透明）。设置opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。你 只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。

opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。一般情况下，精确到一位就可以了，取值如“.3”或“.7”。

三、IE下的CSS透明度

IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：

#myElement { filter: alpha(opacity=40); }  

上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个 元素可以通过使用一些CSS属性来使其被布局，有如width 和 position。关于微软专有的hasLayout属性详情，以及如何触发它，可以参考52CSS.com相关文档。

另外一个设置IE8的CSS透明度的方法语法如下（注意注释中指出的版本）：

#myElement { 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);      
/* 第一行在IE6, IE7和IE8下有效 */      
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";     
/*第二行仅在IE8下有效 */} 

第一行代码针对当前所有IE版本，第二行仅针对IE8。

注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。

说实在，有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后，我也不确定是否还有必要用“progid”的方法。

四、使用JavaScript设置和改变CSS透明度

您可以使用下面的语法访问JavaScript中的CSS opacity 属性：

document.getElementById("myElement").style.opacity = ".4";   
// 针对所有现代浏览器  
document.getElementById("myElement").style.filter = "alpha(opacity=40)"; 
// 针对IE  

上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使用哪一行代码。

五、使用JQuery设置和改变CSS透明度

直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({ opacity: .4 }); // 所有浏览器有效  

您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({opacity: .4}, 1000, function() {      
// 动画完成，所有浏览器下有效  }); 

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

六、通过RGBA的透明度

另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

#rgba {background: rgba(98, 135, 167, .4);} 

在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

七、通过 HSLA的透明度

类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

#hsla {background: hsla(207, 38%, 47%, .4);}  

更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意 RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和 HSLA只影响背景颜色的透明度，仅此而已。

专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

一、浏览器的发展与CSS

网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的 标准，然而 许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL（统一资源定位符）指示，此乃网页的地址；以http:开首的便是 通过 HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议，例如ftp:是FTP（档案传送协议）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

一、浏览器的发展与CSS

网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，这个协议在RFC2616中被完整定义。HTTP/1.1 有其一套Internet Explorer并不完全支援的 标准，然而 许多其他当代的网页浏览器则完全支援这些标准。网页的位置以URL（统一资源定位符）指示，此乃网页的地址；以http:开首的便是 通过 HTTP协议登陆。很多浏览器同时支援其他类型的URL及协议，例如ftp:是FTP（档案传送协议）、gopher:是Gopher及https: 是 HTTPS（以SSL加密的HTTP）。

早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的HTML代码的产生。

但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其他的样式表中继承下来。读者在 有 些 地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2007年为止，第三版还未完备。

二、浏览器是如何渲染页面和加载页面

为什么有些网站打开的时候会加载会很慢，而且是整个页面同时显示的，而有些网站是从顶到下逐步显示出来的？要搞懂这个可以先从下面这个常规流程开始：

1. 浏览器下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。

2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。

3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。

4. 并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。

5. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。

6. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

这里关键的是第2-5这三点。渲染效率与下面三点有关：

1. css选择器的查询定位效率

2. 浏览器的渲染模式和算法

3. 要进行渲染内容的大小

三、什么是CSS以及CSS的优点

什么是CascadingStyleSheets（层叠样式表）*CSS是CascadingStyleSheets(层叠样式表)的 简 称.*CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).*在标准网页设计中CSS负责网页内容 (XHTML)的表 现.*CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.*可以通过简单的更改 CSS文件,改变网页 的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.*CSS是由W3C的CSS工作组产生和维护的.

采用CSS+DIV进行网页重构相对与传统的TABLE网页布局而具有以下3个显著优势：

1. 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2. 提高页面浏览速度对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3. 易于维护和改版你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

四、浏览器对CSS的匹配原理

浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;}，浏 览器 的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为 divBox的div元素，如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。

五、优化你的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

1、不要在ID选择器前使用标签名

DIV#divBox /*一般写法*/ 
#divBox /*更好写法*/ 

解释：因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。

2、不要在class选择器前使用标签名

span.red /*一般写法*/ 
.red /*更好写法* 

解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：

p.red{color:red;} 
span.red{color:#ff00ff} 

如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写

3、尽量少使用层级关系

#divBoxp.red{color:red;} /*一般写法*/ 
.red{..} /*更好写法*/ 

4、使用class代替层级关系

#divBoxullia{display:block;} /*一般写法*/ 
.block{display:block;} /*更好写法*/ 

5、在css渲染效率中id和class的效率是基本相当的

class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。