文档章节

JS插件收集

Ethan-GOGO
 Ethan-GOGO
发布于 2016/06/17 10:55
字数 221
阅读 50
收藏 3

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

 

© 著作权归作者所有

共有 人打赏支持
Ethan-GOGO
粉丝 13
博文 174
码字总数 82033
作品 0
广州
JavaScript 测试及校验工具

JavaScript 是一款强大的广泛运用于现代Web站点及应用的脚本语言。作为一个技艺精湛的 Web 开发者,掌握JavaScript可以增强用户的使用体验,提供交互及富客户端等功能。 尽管JavaScript 的语...

晨曦之光
2012/03/09
0
0
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
JS三教九流系列-require.js-网站模块化开发

js开发的模块化就是module处理 简单理解js模块化的开发就是让我们的web项目对js进行分类的处理 我们在开发网站的时候,里面会用要很多的类库,如jquery,还会有到基于jq各种插件,还会有其他...

透笔度
2015/08/19
0
0
将一个前端项目改写为chromo插件(一)

编写第一个chrome插件? 编写chrome插件完全就是前端知识加上一些专门的知识。 假设文件夹下有文件 嗯,现在看来他只是普通的html,其实,你只要在当前文件夹下加上文件,chrome浏览器就可以把...

saltfish666
05/27
0
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5

没有更多内容

加载失败,请刷新页面

加载更多

下一页

1、Vue解决安卓4.4不兼容的问题

1.npm安装 npm install babel-polyfill--save-devnpm install es6-promise--save-dev package.json中会出现 "babel-polyfill": "^6.26.0","es6-promise": "^4.1.1", 2.main.js引入 impo......

阿K1225
9分钟前
0
0
mybatis generator 属性详解

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN""http://mybatis.org/dtd/mybatis......

太黑_thj
12分钟前
1
0
windows nvm 安装 node

nvm 是 node 的版本控制管理 下面是下载 nvm 的地址,选择 nvm-setup.zip 下载 https://github.com/coreybutler/nvm-windows/releases 就是下一步下一步,一键安装 基本命令有: nvm arch [32...

U_I_A_N
14分钟前
0
0
js判断字符串中是否包含某个字符串

indexOf() indexof()方法可以返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回-1。 var str = "123";console.log(str.indexOf("3") != -1);...

小星星_cjx
27分钟前
0
0
函数式组件完整例子

之前创建的组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 在下面这个例子中,我们标记组件为 functional,这意味它是无状态 (没有响...

tianyawhl
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部