一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。 作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。 LESS 原理及使用方式 本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 客户端 我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码： <link rel="stylesheet/less" type="text/css" href="styles.less"> LESS 源文件的引入方式与标准 CSS 文件引入方式一样： <link rel="stylesheet/less" type="text/css" href="styles.less"> 需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 服务器端 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 […]

龙生   12 Oct 2017
View Details

常见JS动画效果

在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。 一、轮播图： 轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。 1、一般的轮播图。这一类型的轮播图，在切换图片的过程中，图片会缓慢的滑动到达相应的位置，即可以看到图片到达相应位置的全过程。

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                width: 520px;
            }
            div.box{
                width: 520px;
                height: 280px;
                overflow: hidden;
                margin: 100px auto;
                position: relative;
            }
            ul.img{
                top: 0px;
                left: 0px;
                width: 1000%;
                position: absolute;
            }
            ul.img li{
                float: left;
                list-style: none;
            }
            ul.circle{
                left: 50%;
                bottom: 10px;
                margin-left: -75px;
                position: absolute;
            }
            ul.circle li{
                width: 20px;
                height: 20px;
                float: left;
                color: #666;
                cursor: pointer;
                margin: 0px 5px;
                list-style: none;
                text-align: center;
                border-radius: 10px;
                background: #e4e4e4;
                font: normal 12px/20px "conslas";
            }
 
            ul.arrow{
                top: 50%;
                width: 100%;
                position: absolute;
                margin-bottom: -25px;
            }
            ul.arrow li{
                width: 35px;
                height: 50px;
                color: #666;
                cursor: pointer;
                list-style: none;
                text-align: center;
                background: #ccc;
                font: 800 30px/50px "conslas";
            }
            ul.arrow li.left{
                float:left;
            }
            ul.arrow li.right{
                float: right;
            }
            ul.circle li.current{
                color:#fff;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul class="img">
                <li><img src="img/p1.jpg" alt="" /></li>
                <li><img src="img/p2.jpg" alt="" /></li>
                <li><img src="img/p3.jpg" alt="" /></li>
                <li><img src="img/p4.jpg" alt="" /></li>
                <li><img src="img/p5.jpg" alt="" /></li>
            </ul>
            <ul class="circle">
 
            </ul>
            <ul class="arrow">
                <li class="left"><</li>
                <li class="right">></li>
            </ul>
        </div>
 
        <script>
            var box=document.getElementsByTagName("div")[0];//轮播图容器
            var img=box.children[0];//图片容器
            var circle=box.children[1];//小圆点容器
            var arrow=box.children[2];//箭头容器
            var left=arrow.children[0];//左箭头
            var right=arrow.children[1];//右箭头
            var index=0;//当前显示的图片的索引
 
            //需求分析：
            //1、在最后一幅图后面添加第一幅图
            var addImg=img.children[0].cloneNode(true);
            img.appendChild(addImg);
 
            //2、动态添加小圆点，同时点亮第一个
            var circles=img.children;//小圆点的个数即所有图片的个数集合
            for(var i=1;i<circles.length;i++){
                var circleLi=document.createElement("li");
                circleLi.innerHTML=i;
                circle.appendChild(circleLi);
            }
 
            var points=circle.children;
            light();
 
            function light(){
                for(var i=0;i<points.length;i++){
                    points[i].className="";
                    if(index>4){
                        points[0].className="current";
                    }else{
                        points[index].className="current";
                    }
                }
            }
            //3、点击小圆点，ul移动到相应的图片,同时点亮小圆点
            for(var j=0;j<points.length;j++){
                points[j].index=j;
                points[j].onclick=function(){
                    index=this.index;
                    animate(img,-index*box.offsetWidth);
                    light();
                }
            }
 
            //4、左右箭头切换图片
          right.onclick=autoplay;
 
          function autoplay(){
            index++;
            if(index>circles.length-1){
                img.style.left=0;
                index=1;
            }
            animate(img,-index*box.offsetWidth);
            light();
          }
          left.onclick=function(){
             index--;
             if(index<0){
                img.style.left=-(circles.length-1)*box.offsetWidth+"px";
                index=circles.length-2;
             }
             animate(img,-index*box.offsetWidth);
             light();
          }
            //5、添加自动轮播功能
           box.timer=setInterval(autoplay,2000);
           box.onmouseover=function(){
            clearInterval(box.timer);
           }
           box.onmouseout=function(){
            clearInterval(box.timer);
            box.timer=setInterval(autoplay,2000);
           }
 
 
            function animate(obj,target){
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    var speed=(obj.offsetLeft>target?-20:20);
                    if(Math.abs(obj.offsetLeft-target)>20){
                        obj.style.left=obj.offsetLeft+speed+"px";
                    }else{
                        obj.style.left=target+"px";
                    }
                },20)
            }
        </script>
    </body>
</html>

  2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: none;
                list-style: none;
            }
 
            img {
                width: 310px;
                height: 220px;
            }
 
            .slider {
                width: 310px;
                height: 265px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
                cursor: pointer;
            }
 
            .slider-img {
                width: 310px;
                height: 220px;
            }
 
            ul {
                list-style: none;
            }
 
            li {
                position: absolute;
                top: 0;
                left: 0;
            }
 
            .slider-ctrl {
                text-align: center;
                padding-top: 10px;
            }
 
            .slider-ctrl-con {
                display: inline-block;
                width: 24px;
                height: 24px;
                background: url("img/icon.png") no-repeat -24px -780px;
                text-indent: -99999px;
                margin: 0 5px;
                cursor: pointer;
            }
 
            .slider-ctrl-con.current {
                background-position: -24px -760px;
            }
 
            .prev,
            .next {
                position: absolute;
                top: 40%;
                width: 30px;
                height: 35px;
                background: url("img/icon.png") no-repeat;
            }
 
            .prev {
                left: 10px;
            }
 
            .next {
                right: 10px;
                background-position: 0 -44px;
            }
        </style>
    </head>
 
    <body>
        <div class="slider" id="slider" style="overflow: hidden;">
            <div class="slider-img">
                <ul>
                    <li>
                        <a href="#"><img src="img/p1.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p2.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p3.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p4.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p5.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/p6.jpg" alt="" /></a>
                    </li>
                </ul>
            </div>
            <div class="slider-ctrl">
                <span class="prev" id="prev"></span>
                <span class="next" id="next"></span>
            </div>
        </div>
        <script type="text/javascript">
            window.onload = function() {
                var slider = document.getElementById("slider"); //获取元素
                var ul = document.getElementsByTagName('ul')[0];
                var lis = ul.children;
                var per = document.getElementById('prev');
                var next = document.getElementById('next');
                var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离
 
                for (var i = 0; i < lis.length; i++) { //添加span，用于点击跳转到指定图片
                    var span = document.createElement('span');
                    span.innerHTML = i;
                    span.className = "slider-ctrl-con "; //添加未选中状态
                    per.parentNode.insertBefore(span, per);
                    lis[i].style.left = imgWidth + "px";
                }
 
                var num = 0; //标记索引值
                var span = document.getElementsByTagName('span'); //获取span元素
                span[0].className += " current"; //为第一个span标签状态设置为选中状态
                lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置
                for (var k = 0; k < span.length; k++) {
                    span[k].onclick = function() { //为所有span标签添加点击事件（包括左右按钮）
                        if (this.className == "prev") { //当点击的是向前播放按钮时
                            //要看上一张
                            animation(lis[num], imgWidth); //当前图片缓动到右边位置
                            num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引
                            lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧
                            animation(lis[num], 0); //将移动到左侧的图片，缓动到显示位置
                            light(); //点亮底部相应的span标签
                        } else if (this.className == 'next') { //当点击的是向后播放按钮时
                            //要看下一张
                            autoplay(); //按自动播放顺序播放
                        } else {
                            //获取当前被点击的盒子的索引值
                            var index = this.innerHTML;
                            //中间：left = 0；左边：left = -imgWidth+“px";右边：left = +imgWidth+”px“
                            //判断点击的span和当前的图片的索引，谁大谁小
                            if (index > num) { //当点击索引值大于当前播放图片的索引值时
                                lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧
                                animation(lis[num], -imgWidth); //当前播放图片缓动到左侧
                                animation(lis[index], 0); //再缓动至当前播放位置
                                num = index; //改变索引值
                                light(); //点亮底部相应的span标签
                            }
                            if (index < num) {
                                lis[index].style.left = -imgWidth + "px";
                                animation(lis[num], imgWidth);
                                animation(lis[index], 0);
                                num = index;
                                light();
                            }
                        }
 
                    }
                }
 
                function animation(obj, target) { //缓动
                    clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
                    obj.timer = setInterval(function() {
                        var speed = (target - obj.offsetLeft) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值，给speed取整
                        obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素
                        if (target == obj.offsetLeft) { //属性达到目标值时，清理定时器
                            clearInterval(obj.timer);
                        }
                    }, 20);
                }
 
                slider.timer = setInterval(function() { //当前无操作时自动播放
                    autoplay();
                }, 2000);
 
                slider.onmouseover = function() { //鼠标进入图片区域停止自动播放
                    clearInterval(slider.timer);
                }
 
                slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放
                    clearInterval(slider.timer);
                    slider.timer = setInterval(function() {
                        autoplay();
                    }, 2000);
                }
 
                function light() {
                    for (var j = 0; j < span.length - 2; j++) {
                        span[j].className = "slider-ctrl-con ";
                    }
                    span[num].className += " current";
                }
 
                function autoplay() { //封装自动播放函数
                    animation(lis[num], -imgWidth);
                    num = ++num > lis.length - 1 ? 0 : num;
                    lis[num].style.left = imgWidth + "px";
                    animation(lis[num], 0);
                    light();
                }
            }
        </script>
    </body>
 
</html>

  二、旋转木马。顾名思义，旋转木马的动画效果和游乐园中旋转木马类似，因此而得名。旋转木马的原理和轮播图其实差不多，只是旋转木马需要设置每一张图片的z-index属性，且每一张的z-index的设置精准、满意需要一定的经验。

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            .wrap {
                width: 1200px;
                margin: 10px auto;
            }
 
            .slider {
                height: 500px;
                position: relative;
            }
 
            .slider li {
                list-style: none;
                position: absolute;
                left: 200px;
                top: 0;
            }
 
            .slider li img {
                width: 100%;
                display: block;
            }
 
            .arrow {
                opacity: 1;
            }
 
            .prev,
            .next {
                width: 76px;
                height: 112px;
                position: absolute;
                top: 50%;
                margin-top: -56px;
                background: url(img/prev.png) no-repeat;
                z-index: 99;
            }
 
            .next {
                right: 0;
                background: url("img/next.png") no-repeat;
            }
 
            .prev {
                left: 0;
            }
        </style>
    </head>
 
    <body>
        <div class="wrap">
            <div class="slider">
                <ul>
                    <li><img src="img/1.jpg" /></li>
                    <li><img src="img/2.png" /></li>
                    <li><img src="img/3.jpg" /></li>
                    <li><img src="img/4.jpg" /></li>
                    <li><img src="img/5.jpg" /></li>
                </ul>
                <div class="arrow">
                    <div class="prev" id="prev"></div>
                    <div class="next" id='next'></div>
                </div>
            </div>
        </div>
        <script>
            var json = [{ //  0
                width: 400,
                top: 70,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            }, { // 1
                width: 600,
                top: 120,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            }, { // 2
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            }, { // 3
                width: 600,
                top: 120,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            }, { //4
                width: 400,
                top: 70,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }];
            //根据json的内容把图片缓动到相应位置，同时缓动
            var liArr = document.getElementsByTagName('li');
            var next = document.getElementById('next');
            var prev = document.getElementById('prev');
 
            function move() {
                for (var i = 0; i < liArr.length; i++) {
                    animation(liArr[i], json[i]);
                }
            }
            move()
            next.onclick = function() {
                var last = json.pop();
                json.unshift(last);
                move()
            }
            prev.onclick = function() {
                var first = json.shift();
                json.push(first);
                move();
            }
 
            function animation(obj, json, fn) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var flag = true;
                    //json里面有几个属性就要执行几次
                    var target = 0; //记录目标位置
                    var leader = 0; //记录当前位置
                    var speed = 0; //记录速度
                    for (var key in json) {
                        if (key == 'opacity') {
                            target = Math.round(json['opacity'] * 100) //0-100
                            leader = getStyle(obj, 'opacity') * 100 //0-100
                        } else {
                            target = parseInt(json[key]);
                            leader = parseInt(getStyle(obj, key));
                        }
                        speed = (target - leader) / 10;
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        leader = leader + speed; //0-100
                        if (key == 'opacity') {
                            obj.style.opacity = leader / 100;
                            obj.style.filter = "alpha(opacity=" + leader + ")";
                        } else if (key == "zIndex") {
                            obj.style.zIndex = json['zIndex'];
                        } else {
                            obj.style[key] = leader + "px";
                        }
 
                        if (leader != target) {
                            flag = false
                        }
                    }
                    if (flag) {
                        clearInterval(obj.timer);
                        if (fn) {
                            fn();
                        }
                    }
 
                }, 20)
            }
 
            function getStyle(obj, attr) {
                if (window.getComputedStyle) {
                    return window.getComputedStyle(obj, null)[attr]
                } else {
                    return obj.currentStyle[attr];
                }
            }
        </script>
    </body>
 
</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>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            ul.nav{
                position: fixed;
                top: 80px;
                left: 20px;
            }
            ul.nav li{
                width: 70px;
                height: 40px;
                color: #fff;
                cursor: pointer;
                background: #ccc;
                text-align: center;
                line-height: 40px;
                list-style: none;
                margin-top: 10px;
            }
            ul.nav .current{
                background: red;
            }
            ul.content{
                height: 500%;
            }
            ul.content li{
                height: 20%;
                text-align: center;
                font: 100px/200px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
        <ul class="content">
            <li>享品质</li>
            <li>服饰美妆</li>
            <li>家电手机</li>
            <li>电脑数码</li>
            <li>3C运动</li>
        </ul>
 
        <script type="text/javascript">
            var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB'];
            var navlis=document.getElementsByTagName("ul")[0].children;
            var contentlis=document.getElementsByTagName("ul")[1].children;
            for(var i=0;i<color.length;i++){
                contentlis[i].style.background=color[i];
            }
 
            for(var i=0;i<navlis.length;i++){
                navlis[i].index=i;
                navlis[i].onclick=function(){
                    for(var j=0;j<navlis.length;j++){
                        navlis[j].className="";
                    }
                    this.className="current";
 
                    var yPos=this.index*document.body.offsetHeight;
                    clearInterval(window.timer);
                    window.timer=setInterval(function(){
                        var speed=(yPos-scroll().top)/10;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        window.scrollTo(0,scroll().top+speed);
                        if(scroll().top==yPos){
                            clearInterval(Window.timer);
                        }
                    },30)
                }
            }
 
            window.onscroll=function(){
                var num=scroll().top/document.body.offsetHeight;
                num=Math.ceil(num*2)/2;
                if(parseInt(num)!=num){
                    num=num-0.5;
                }
                for(var j=0;j<navlis.length;j++){
                    navlis[j].className="";
                }
                navlis[num].className="current";
            }
 
            function scroll(){
                return{
                    "top":document.body.scrollTop+document.documentElement.scrollTop,
                    "left":document.body.scrollLeft+document.documentElement.scrollLeft
                }
            }
        </script>
    </body>
</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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html{
                height:100%;
            }
            body{
                height: 600%;
            }
            div{
                position: fixed;
                right: 30px;
                bottom: 20px;
                display: none;
 
            }
        </style>
    </head>
    <body>
        <div>
            <img src="Top.jpg" />
        </div>
 
        <script type="text/javascript">
            var div=document.getElementsByTagName("div")[0];
            var img=div.children[0];
            window.onscroll=function(){
                if(scroll().top>100){
                div.style.display="block";
            }else{
                div.style.display="none";
                }
            }
 
            img.onclick=function(){
                clearInterval(img.timer);
                img.timer=setInterval(function(){
                    var speed=(0-scroll().top)/10;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    window.scrollTo(0,scroll().top+speed);
                    if(scroll().top==0){
                        clearInterval(img.timer);
                    }
                },30)
            }
 
 
            function scroll(){
                return{
                   "top":document.documentElement.scrollTop+document.body.scrollTop,
                   "left":document.documentElement.scrollLeft+document.body.scrollLeft
                }
            }
        </script>
    </body>
</html>

  常见的JS动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。   from:https://my.oschina.net/sichunchen/blog/1544549

龙生   01 Oct 2017
View Details

bootstrap中的焦点图实例

使用html属性标记,代码如下: <div id="myCarousel" class="carousel">   <!-- 要切换的内容-->   <div class="carousel-inner">     <div class="active item">…</div>     <div class="item">…</div>     <div class="item">…</div>   </div>   <!-- 切换导航 -->   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> </div> 也可以在使用了.carousel类的元素内部添加切换内容指示工具   <!-- 焦点图指示器--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> 方法 .carousel(options) 初始化轮播组件,接受一个对象做为可选参数并开始循环播放. 例如: $(".carousel").carousel({    interval:2000 }) .carousel('cycle') 从左向右循环播放 .carousel('pause')中止播放 .carousel(number)播放到某个特定的帧(与数组类似,从0开始计数). .carousel('prev') 回到上一帧 .carousel('next') 回到下一帧 轮播类提供了两个事件 slide 该事件在调用slide实例方法时立刻触发 slid 该事件在轮播项切换效果完成之后触发 本实例代码如下: <style>/*metro风格样式*/         div, input, select, textarea, span, img, table, td, th, p, a, button, ul, li         {             border–radius: 0 0 0 0 !important;         }                                                               [class^="m-icon-"]         {             display: inline–block;             width: 14px;             height: 14px;             margin–top: 4px;             line–height: 14px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0;             background–repeat: no–repeat;         }                                                               [class^="m-icon-big-"]         {             display: inline–block;             width: 30px;             height: 30px;             margin: 6px;             vertical–align: top;   background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons.png);             background–position: 0 0px;             background–repeat: no–repeat;         }                                                               .m–icon–white         {             background–image: url(http://www.kuiyu.net/content/bootstrap/img/syncfusion-icons-twhite.png);         }                                                               /*  Misc */         .btn.icn–only         {             min–width: 14px;         }         .btn.bigicn–only         {             min–width: 34px;         }         .m–icon–swapright         {             background–position: –27px –10px; […]

龙生   20 Sep 2017
View Details

给 Web 开发人员推荐的开源图形库 —— 2D/3D

现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高，数据可视化、动画交互、2D/3D 等元素已然成为标配。   2D 一、绘图渲染 1、图形 PixiJS 一个 HTML5 构建引擎，用最快、最灵活的 2D WebGL 渲染器创建漂亮的数字化内容。旨在提供一个可以在所有设备上运行的快速轻量级 2D 库，帮助你创建丰富的交互式图形、跨平台应用和游戏，而无需深入到 WebGL API 或处理浏览器和设备的兼容性。 效果预览：点此查看 Fabric.js 一个可以轻松使用 HTML5 canvas 元素的库，在 Canvas 元素之上提供交互对象模型，同时还包含 SVG-to-canvas 解析器。它可以帮助你在画布上创建和填充对象，从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等。 效果预览：点此查看 2、立体像素 Obelisk.js 这是一个构建等距立体像素对象的 JavaScript 库，通过提供简单灵活的 API ，可以轻松地在 HTML5 画布中添加像砖、立方体、金字塔和斜率等等距像素元素。它严格遵循像素整齐的模式，在像素级别中处理所有渲染以获得精确的像素排列。 3、字体 opentype.js 这是一款是用于 TrueType 和 OpenType 字体的 JavaScript 解析器和写入程序。它非常高效，可在浏览器和 node.js 中运行。 4、创意 p5.js P5.js 有完整的一套画图功能，既可当作画图软件使用，也包括支持与各类页面元素交互的库。但是，开发者没有被限制自己的画布上，他们可以把整个浏览器页面作为自己的素描区域。正因为如此，P5.js 有一个 addon 库能够使开发者非常容易地与其它 HTML5 对象（包括文本、输入、视频、网络摄像头和声音）进行交互。 效果预览：点此查看 二、矢量图形 Snap.svg 一个显示为现代 Web 准备的 Javascript SVG 库，专为现代浏览器而设计，支持最新的 SVG 功能，如屏蔽、剪切、模式、完整梯度、组等。旨在让你使用 SVG 资源就像在 jQuery 中使用 DOM 一样简单。 效果预览：点此查看 Raphaël 一个小型的 JavaScript 库，用来简化在页面上显示矢量图的工作。例如，如果要创建自定义的图表或图像裁剪和旋转小部件，可以使用该库简单而轻松地实现。Raphaël 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，这意味着创建的每一个图形对象也是一个 DOM 对象，可以附加 JavaScript 事件处理程序或稍后修改它们。它旨在提供一个适配器，能跨浏览器和更简单地绘图矢量作品。 三、物理引擎 […]

龙生   06 Aug 2017
View Details

给 Web 开发人员推荐的开源图形库 —— 动画

现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高，数据可视化、动画交互、2D/3D 等元素已然成为标配。   动画 一、效果（Effects） 1、切换和过渡 Animate.css 一个跨浏览器的 css3 动画库，内置了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）、放大缩小（等多达 60 多种动画效果，几乎包含了所有常见的动画效果。在炫酷的同时，还一直保持着易于使用的特点。 效果预览：点此查看 Magic Animations 一个独特的 CSS3 动画特效包，可以自由地使用在 Web 项目中。包括：Magic Effects、Bling、Static Effects、Static Effects Out、Perspective、Rotate、Slide、Math、Tin、Bomb 等各类效果。 效果预览：点此查看 Effeckt.css 同样是一个包含众多精妙的 CSS3 切换和动画效果库，例如：弹窗、按钮、导航、列表、页面切换等，适用于网站和移动 Web 开发。 效果预览：点此查看 还有： Velocity.js：一个简单易用、高性能、功能丰富的轻量级动画库。它能和 jQuery 完美协作，并和 $.animate() 有相同的 API， 但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还有变换、循环、缩放等特色功能。 Anime.js：可以和 CSS3 属性、SVG、DOM 元素和 JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。 数量太多，不一一列举。 2、悬停 Hover 一款基于 CSS3 的悬停特效合集，可以轻松的被应用到链接、按钮、LOGO、SVG 以及图片等元素和修饰上。可用于 CSS、Sass 和 LESS 。 效果预览：点此查看 3、图标 Transformicons 一个结合 SVG、CSS 和 HTML 技术，让图标、按钮和符号具有变种（特殊）动画效果的库。它几乎可完成开发所需的任意动画效果，还提供了一些可选参数方便对效果进行自定义。 4、加载 Loaders.css 一款追求性能和体验感的加载动画合集，利用纯 CSS 实现多种样式的 Loading 加载动画。这些动画并不需要图片来辅助，以避免昂贵的绘画和布局成本，同时也对运行效率有所保证。 SpinKit 同样是一款  CSS 加载动画合集，可高度自定义动画效果，并且提供多个参数可供选择，运行性能流畅。 类似的 spin.js 也不错，压缩后仅 1.9K，在此不多赘述。 5、行为速度（Easing） d3-ease […]

龙生   06 Aug 2017
View Details

给 Web 开发人员推荐的开源图形库 —— 数据可视化

现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高，数据可视化、动画交互、2D/3D 等元素已然成为标配。 数据可视化 1、D3.js 最流行的可视化库之一，被各种表格插件、库、框架所使用。它允许绑定任意数据到 DOM ，然后将数据驱动转换应用到 Document 中。你可以使用它从数组中生成 HTML 表，或是使用相同的数据创建具有平滑过渡和交互的交互式 SVG 条形图。 效果预览：点此查看 2、Recharts 基于 React 的组合式图表，用解耦的、可重用的 React 组件快速构建你的图表。依赖于轻量级的 D3 子模块构建 SVG 元素，还可以调整组件的属性与传递组件来自定义图表。 效果预览：点此查看 类似的将 React 和 D3 结合在一起的还有： Victory 一个用于构建图表模块化和交互式数据可视化的 ReactJS 库。效果预览 VX 可重用的 low-level 可视化组件集合。效果预览 3、ECharts 一个由百度开源的纯 Javascript 图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、Firefox、Safari 等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。 效果预览：点此查看 4、Highcharts 同样是一个制作图表的纯 Javascript 类库，为网站或 Web 应用提供了一种简单的方法来添加交互式图表。 目前支持直线图、曲线图、区域图、区域曲线图、柱状图、饼状图、散布图等类型。需注意的是，商业使用该库需要购买授权。 效果预览：点此查看 5、Google Charts Google Charts 提供了一种可视化网站数据的方式，从简单的线图到复杂的层次树图，内置的图表库提供大量打开即用的图表类型。它还可以自定义图表以适应网站外观，图表具有高度的互动性，使用 HTML5 / SVG 技术呈现，以提供跨浏览器兼容性和跨平台可移植性。 效果预览：点此查看 6、Plotly.js 一个 high-level 声明式图表库，基于 D3 和 stack.gl ，内置 20 多种图表类型，包括 3D 图表、统计图和 SVG 图等。 7、Chart.js 一个简单灵活的基于 HTML5 的 JavaScript 图表库，浏览器兼容性良好，内置 […]

龙生   06 Aug 2017
View Details

给 Web 开发人员推荐的通用独立 UI 组件

现代 Web 开发在将体验和功能做到极致的同时，对于美观的追求也越来越高。在推荐完图形库之后，再来推荐一些精品的独立 UI 组件。这些组件可组合在一起，形成美观而交互强大的 Web UI 。 下面将针对布局（Layout）、Icon（图标）、Progress（进度）、Button（按钮）、Picker（选择器）、Accordion（折叠）、Input（输入）、Overlay（重叠）、Content（内容/目录）、Editor（编辑）、Widget（挂件）等分别做一些推荐整理。由于篇幅有限，将分两期发布，欢迎保持关注。 一、布局 1、Split.js 一个轻量级的 JavaScript 工具，用于创建可调整的分割视图或者窗格，gzip 大小仅 2 KB。视图可以水平或者垂直分割，没有附加的开销和窗口，使用纯 CSS 进行调整。同时，还保证了与 IE9 和 IE8 ，以及 Firefox / Chrome / Safari / Opera 等主流浏览器的兼容性。 Demo 点此查看 2、Bricks.js 一个快速的布局堆砌器，不需要 HTML 标记或 CSS 样式表即可完成布局。功能强大，配置文件可读。 Demo 点此查看 3、masonry 一个老牌布局框架，已开发和维护 8 年，拥有自己的描述语法，采用优雅的链式语法封装自动布局。它可以根据可用的垂直空间将元素放置在最佳位置，类似于在墙壁上砌砖的经验丰富的泥水匠。 Demo 点此查看 4、React-Grid-Layout 不同于前面，这是一个 React Grid 布局系统，不需要 jQuery。它是响应式的，并且支持断点（breakpoints）。断点布局可由用户提供或自动生成，可随意拖动和调整大小。 Demo 点此查看 二、图标 1、Feather 一款简单漂亮的开源图标集，强调功能、一致性和简单性。主要设计的使用范畴为应用系统、媒体控制、位置、天气、箭头、徽标等，均为以线条为主的极简化设计。图标遵循 24×24 Grid 设计。 Demo 点此查看 2、Material Icons Guide Google 开源的 Material Design 图标集，在 Web 应用，安卓和 iOS 设计中均适用。包含用于媒体播放、通讯、内容编辑、连接等等常用的图标，目前数量已超过 900 个。 Demo 点此查看 3、Bytesize Icons 一个轻量级 style-controlled SVG 图标集，每个图标都是遵循 32×32 Grid 进行手工编码，并使用 […]

龙生   05 Aug 2017
View Details

React Native之React速学教程(上)

本文出自《React Native学习笔记》系列文章。 React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学教程》分为上、中、下三篇，大家可以根据需要进行阅读学习。 概述 本篇为《React Native之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component）以及组件的属性，状态等方面进行讲解。 What’s React React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。 当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。 构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。 一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用。 不是模板却比模板更加灵活： 心得：上图是GitHub Popular的首页截图，这个页面是通过不同的组件组装而成的，组件化的开发模式，使得代码在更大程度上的到复用，而且组件之间对的组装很灵活。 Get Started 使用React之前需要在页面引入如下js库 。 react.js react-dom.js browser.min.js 上面一共列举了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，browser.min.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。 你可以从React官网下载这些库，也可以将其下载到本地去使用。 心得：在做React Native开发时，这些库作为React Native核心库已经被初始化在node_modules目录下，所以不需要单独下载。 使用React 解压从上述地址下载的压缩包，在根目录中创建一个包含以下内容的 “helloworld.html” 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
&lt;!DOCTYPE html&gt;
&lt;<span class="pl-ent">html</span>&gt;
  &lt;<span class="pl-ent">head</span>&gt;
    &lt;<span class="pl-ent">meta</span> <span class="pl-e">charset</span>=<span class="pl-s"><span class="pl-pds">"</span>UTF-8<span class="pl-pds">"</span></span> /&gt;
    &lt;<span class="pl-ent">title</span>&gt;Hello React!&lt;/<span class="pl-ent">title</span>&gt;
    &lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>build/react.js<span class="pl-pds">"</span></span>&gt;<span class="pl-s1">&lt;</span>/<span class="pl-ent">script</span>&gt;
    &lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>build/react-dom.js<span class="pl-pds">"</span></span>&gt;<span class="pl-s1">&lt;</span>/<span class="pl-ent">script</span>&gt;
    &lt;<span class="pl-ent">script</span> <span class="pl-e">src</span>=<span class="pl-s"><span class="pl-pds">"</span>https://npmcdn.com/babel-core@5.8.38/browser.min.js<span class="pl-pds">"</span></span>&gt;<span class="pl-s1">&lt;</span>/<span class="pl-ent">script</span>&gt;
  &lt;/<span class="pl-ent">head</span>&gt;
  &lt;<span class="pl-ent">body</span>&gt;
    &lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>example<span class="pl-pds">"</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
    &lt;<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/babel<span class="pl-pds">"</span></span>&gt;
<span class="pl-s1">      <span class="pl-smi">ReactDOM</span>.<span class="pl-en">render</span>(</span>
<span class="pl-s1">        <span class="pl-k">&lt;</span>h1<span class="pl-k">&gt;</span>Hello, world<span class="pl-k">!</span><span class="pl-k">&lt;</span><span class="pl-k">/</span>h1<span class="pl-k">&gt;</span>,</span>
<span class="pl-s1">        <span class="pl-c1">document</span>.<span class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>example<span class="pl-pds">'</span></span>)</span>
<span class="pl-s1">      );</span>
    <span class="pl-s1">&lt;</span>/<span class="pl-ent">script</span>&gt;
  &lt;/<span class="pl-ent">body</span>&gt;
&lt;/<span class="pl-ent">html</span>&gt;

在 JavaScript 代码里写着 XML 格式的代码称为 JSX，下文会介绍。为了把 JSX 转成标准的 JavaScript，我们用<script type="text/babel">标签，然后通过Babel转换成在浏览器中真正执行的内容。 ReactDOM.render() ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

1
2
3
4
ReactDOM.render(
  &lt;<span class="pl-ent">h1</span>&gt;Hello, world!&lt;/<span class="pl-ent">h1</span>&gt;,
  document.getElementById('example')
);

上述代码的作用是将<h1>Hello, world!</h1>插入到元素id为example的容器中。 JSX JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。 JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。 […]

龙生   29 Jul 2017
View Details

React Native之React速学教程(中)

本文出自《React Native学习笔记》系列文章。 React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学教程》分为上、中、下三篇，大家可以根据需要进行阅读学习。 概述 本篇为《React Native之React速学教程》的第二篇。本篇将从组件(Component)的详细说明、组件的生命周期(Component Lifecycle)、isMounted是个反模式等方面进行讲解，让大家对组件(Component)有个更系统以及更深入的认识。 组件的详细说明 当通过调用 React.createClass() 来创建组件的时候，每个组件必须提供render方法，并且也可以包含其它的在这里描述的生命周期方法。 render ReactComponent render() render() 方法是必须的。 当该方法被回调的时候，会检测 this.props 和 this.state，并返回一个单子级组件。该子级组件可以是虚拟的本地 DOM 组件（比如 <div /> 或者 React.DOM.div()），也可以是自定义的复合组件。 你也可以返回 null 或者 false 来表明不需要渲染任何东西。实际上，React 渲染一个<noscript>标签来处理当前的差异检查逻辑。当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。 注意： render()函数应该是纯粹的，也就是说该函数不修改组件的 state，每次调用都返回相同的结果，不读写 DOM 信息，也不和浏览器交互（例如通过使用 setTimeout）。如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持 render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。 心得：不要在render()函数中做复杂的操作，更不要进行网络请求，数据库读写，I/O等操作。 getInitialState object getInitialState() 初始化组件状态，在组件挂载之前调用一次。返回值将会作为 this.state的初始值。 心得：通常在该方法中对组件的状态进行初始化。 getDefaultProps object getDefaultProps() 设置组件属性的默认值，在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。 Usage:

1
2
3
4
5
6
7
getDefaultProps() {
    return {
      title: '',
      popEnabled:true
    };
  },
 

注意 该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。 心得：该方法在你封装一个自定义组件的时候经常用到，通常用于为组件初始化默认属性。 PropTypes object propTypes propTypes 对象用于验证传入到组件的 props。 可参考可重用的组件。 Usage:

1
2
3
4
5
6
7
8
9
10
11
12
var NavigationBar=React.createClass({
  propTypes: {
    navigator:React.PropTypes.object,
    leftButtonTitle: React.PropTypes.string,
    leftButtonIcon: Image.propTypes.source,
    popEnabled:React.PropTypes.bool,
    onLeftButtonClick: React.PropTypes.func,
    title:React.PropTypes.string,
    rightButtonTitle: React.PropTypes.string,
    rightButtonIcon:Image.propTypes.source,
    onRightButtonClick:React.PropTypes.func
  },

心得：在封装组件时，对组件的属性通常会有类型限制，如：组件的背景图片，需要Image.propTypes.source类型，propTypes便可以帮你完成你需要的属性类型的检查。 mixins array mixins mixin 数组允许使用混合来在多个组件之间共享行为。更多关于混合的信息，可参考Reusable Components。 心得：由于ES6不再支持mixins，所以不建议在使用mixins，我们可以用另外一种方式来替代mixins，请参考：React Native之React速学教程(下)-ES6不再支持Mixins。 statics object statics statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。例如：

1
2
3
4
5
6
7
8
9
10
var MyComponent = React.createClass({
  statics: {
    customMethod: function(foo) {
      return foo === 'bar';
    }
  },
  render: function() {
  }
});
MyComponent.customMethod('bar');  // true

在这个块儿里面定义的方法都是静态的，你可以通过ClassName.funcationName的形式调用它。 注意 这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值，在调用处把 props 作为参数传入到静态方法。 displayName string displayName displayName 字符串用于输出调试信息。JSX 自动设置该值；可参考JSX in Depth。 isMounted boolean isMounted()，当组件被渲染到DOM，该方法返回true，否则返回false。该方法通常用于异步任务完成后修改state前的检查，以避免修改一个没有被渲染的组件的state。 心得：开发中不建议大家isMounted，大家可以使用另外一种更好的方式来避免修改没有被渲染的DOM，请下文的isMounted 是个反模式。 组件的生命周期(Component Lifecycle) 在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, – (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法，在Android中Activity则提供了onCreate(),onStart(),onResume(),onPause(),onStop(),onDestroy()等生命周期方法，这些生命周期方法展示了一个界面从创建到销毁的一生。 那么在React […]

龙生   29 Jul 2017
View Details

React Native之React速学教程(下)

本文出自《React Native学习笔记》系列文章。

React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。 通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之React速学教程》分为上、中、下三篇，大家可以根据需要进行阅读学习。

龙生   29 Jul 2017
View Details
1 … 28 29 30 … 59

Copyright © 2025 Longsheng All rights reserved