JS插件收集

1.動畫插件

<script>
    $(function(){
//        導航跳轉動畫
        $('.nav').singlePageNav({
            offset:70
        });


//動畫初始化
        new WOW().init();
    })
</script>


 <div class="wow flash" data-wow-delay="0.2s" data-wow-duration="1s">
</div>

 

2.表插件

1.建立畫布
            <div class="panel panel-default">
                <div class="panel-heading">今日訪客統計</div>
                <div class="panel-body">
                    <canvas id="canvas" class="col-md-12"></canvas>
                </div>
            </div>

2.引出曲線圖代碼js

var lineChartData = {
	//X座標數據
	labels : ["2","4","6","8","10","12","14","16","18","20","22","24"],
	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 : [1,2,3,4,5,5,6,7,8,8,9,9]
		},
		{
			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 : [2,2,1,4,2,4,5,7,8,8,4,3]
		}
	]

}

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