-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
108 lines (107 loc) · 2.94 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>colorful.js</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
height: 100%
}
.fork{
position: absolute;
top: 0;
right: 0;
}
.fork img{
border:0;
}
article{
display: block;
min-height:400px;
width:80%;
min-width:540px;
border:1px solid #6cc;
margin:10px 0 0 110px;
padding:20px;
border-radius:5px;
-o-border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px
}
article p{
text-indent:2em;
font-size:18px;
line-height:1.6em;
color:#333
}
.code{
background-color:#0f192a;
color:#fff;
margin:0 30px;
padding:8px 0 4px 0;
font-size:.8125em;
font-family:Consolas,Inconsolata,"Bitstream Vera Sans Mono",Menlo,Monaco,"Andale Mono","Courier New",monospace
}
#page{
position: absolute;
width: 100%;
height: 100%;
}
#introduce{
position: absolute;
width: 100%;
height: 100%;
top:100%;
}
#title{
text-align: center;
color: #fff;
font-size: 80px;
line-height: 5;
}
#isColor{
font-size: 22px;
}
</style>
</head>
<body>
<div id="page" style="background-color:rgb(0,0,0)">
<a class="fork" href="https://github.com/SoAanyip/colorful.js" target="_blank"><img src="img/fork.png" alt="Fork me on GitHub" /></a>
<h1 id="title">colorful.js</h1>
</div>
<div id="introduce">
<article>
<p> colorful.js可以通过用户自定义关键帧的颜色，通过css3的transition实现颜色渐变功能。在低版本浏览器会通过javascript来实现。</p>
<p>最简单用法：</p>
<p class="code">startLoop(document.getElementById('page'));</p><br/>
<p>调用方法：</p>
<p class="code">function startLoop(element,array,msec,attr)</p>
<p class="code">@param {HTMLElement} element 接受变色的元素</p>
<p class="code">@param {array} array 变色依赖的关键颜色的二维数组，按rgb传入，ex: [[255,255,0],[0,220,220],[220,0,220]]</p>
<p class="code">@param {number} msec 完成一个变色阶段的时间（毫秒），即从array[i]变色到array[i+1]的时间。为了避免闪烁伤害眼睛，msec不能小于400</p>
<p class="code">@param {string} attr 如果要变色的是css的其他属性，传入属性的名字，如'color'</p>
<p>example：</p>
<p class="code">var page = document.getElementById('page');</p>
<p class="code">var array = [[255,255,0],[0,220,220],[153,51,0]];</p>
<p class="code">var msec = 3000;</p>
<p class="code">startLoop(page,array,msec);</p>
<p>attr传入'color'的效果：</p>
<p id="isColor">I`m colorful.js</p>
</article>
</div>
<script src="js/colorful.js"></script>
<script>
window.onload = function(){
var page = document.getElementById('page');
var array = [[255,255,0],[0,220,220],[153,51,0]];
var msec = 2000;
startLoop(page,array,msec);
startLoop(document.getElementById('isColor'),null,null,'color');
}
</script>
</body>
</html>