jquery插件使用概要（持续更新）

jquery插件使用概要（持续更新）

1 单页面导航插件jquery.singlePageNav.min.js
作用：使一个页面的导航点击跳转时具有缓慢的跳转效果，而不是点击就直接切换到跳转后的画面，让导航稍显活性。
使用方法：给主导航元素调用一个方法singlePageNav()，如下：

$(".navbar-nav").singlePageNav();

2 动画效果animate.css与wow.min.js
作用：使网页中指定元素具有漂亮的动画效果
使用方法：
step1：先引入这两个文件，然后在代码中生成一个新的WOW对象并初始化

var WOW = new WOW().init();

step2：给需要调用动画的元素指定类名wow 和 【fadeInUp】，其中fadeInUp仅代表其中一个动画名称
3 图表插件Chart.js
作用：可以使用该插件在网页中生成许多漂亮的图表
使用方法：
step1: 在网页中引入改文件后，在需要创建图表的元素中新建一个canvas画布，并给它指定一个id，如：

<canvas id="canvas">canvas>

step2: 调用如下js代码，这只是诸多图表其中一个，建立各种图表的代码相似，可以根据具体需要再搜索；

var lineChartData = {
    //X坐标数据
    labels : ["周一","周二","周三","周四","周五","周六","周日"],
    datasets : [
        {   
            //统计表的背景颜色
            fillColor : "rgba(255,255,255,0)",
            //统计表画笔颜色
            strokeColor : "rgba(0, 0,0, 1)",
            //点的颜色
            pointColor : "rgba(155, 39, 39, 1);",
            //点边框的颜色
            pointStrokeColor : "#fff",
            //鼠标触发时点的颜色
            pointHighlightFill : "#fff",
            //鼠标触发时点边框的颜色
            pointHighlightStroke : "rgba(220,220,220,1)",
            //Y坐标数据
            data : [400,600,800,1450,800,500,800]
        },
        {
            fillColor : "rgba(255,255,255,0)",
            strokeColor : "rgba(92, 184, 92, 1)",
            pointColor : "rgba(23, 126, 23, 1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [200,400,700,1000,500,600,900]
        }
    ]

}

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

4 动态设置背景图片插件jquery.backstretch.min.js
作用：让页面背景图可以在指定时间内在指定的背景图之间轮流更换
简介：Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。
使用方法：
step1： 引入文件后，调用如下js代码，可以在数组中指定需要切换的图片，以及设置间隔时间

$(function () {  
            $(".container").css({ opacity: .8 });   //设置透明度  
            $.backstretch([  
                  "Images/backgrounds/101_1.jpg",  
                  "Images/backgrounds/44_1.jpg"  
            ], { duration: 3000, fade: 750 });  
        });  
 script>