常见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

支持响应式编程 Spring Framework 5.0 稳定版正式发布

Spring Framework 5.0 GA 稳定版已正式发布。 经过一年多的里程碑版和 RC 版，以及将近两年的开发，Spring Framework 5.0 GA 稳定版现已正式发布。可从 repo.spring.io 和 Maven Central 获得。 这个全新一代的框架带来了以下新特性： 支持 JDK 9 和 Java EE 8 级别的 API（如 Servlet 4.0） 与 Reactor 3.1, JUnit 5, 和 Kotlin 语言的全面集成 带来了许多函数式 API 变体 (functional API variants) 响应式堆栈 Web 框架 —— Spring WebFlux 此外，值得注意的是，整个 Spring Framework 5.0 代码库运行于 Java 8 之上。因此 Spring Framework 5.0 对环境的最低要求是 Java 8。 可以看到，Spring Framework 5.0 的亮点是响应式编程，这是一个重要的范式转变。随着响应式编程越来越受欢迎，我们可以期待越来越多的技术将实现响应式解决方案。 相关链接： Spring Framework 5.0 中的新功能 迁移到 Spring Framework 5.0 官方的 Spring Framework 5 FAQ 最新的参考文档 更多内容请参阅发布主页和详细更新说明。 Maven

1
2
3
4
5
6
7
<span class="hljs-tag">&lt;<span class="hljs-name">dependencies</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">dependency</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">groupId</span>&gt;</span>org.springframework<span class="hljs-tag">&lt;/<span class="hljs-name">groupId</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">artifactId</span>&gt;</span>spring-context<span class="hljs-tag">&lt;/<span class="hljs-name">artifactId</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">version</span>&gt;</span>5.0.0.RELEASE<span class="hljs-tag">&lt;/<span class="hljs-name">version</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">dependency</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">dependencies</span>&gt;</span>

Gradle

1
2
3
dependencies {
    compile <span class="hljs-string">'org.springframework:spring-context:5.0.0.RELEASE'</span>
}

下载地址： http://projects.spring.io/spring-framework/ Source code (zip) Source code (tar.gz) 相关链接 […]

龙生   01 Oct 2017
View Details

响应式编程

简称RP（Reactive Programming） 响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。 例如，在命令式编程环境中，a:=b+c表示将表达式的结果赋给a，而之后改变b或c的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。 电子表格程序就是响应式编程的一个例子。单元格可以包含字面值或类似"=B1+C1"的公式，而包含公式的单元格的值会依据其他单元格的值的变化而变化。 响应式编程最初是为了简化交互式用户界面的创建和实时系统动画的绘制而提出来的一种方法，但它本质上是一种通用的编程范式。 例如，在MVC软件架构中，响应式编程允许将相关模型的变化自动反映到视图上，反之亦然。

龙生   01 Oct 2017
View Details

php-fpm

PHP-FPM(FastCGI Process Manager：FastCGI进程管理器)是一个PHPFastCGI管理器，对于PHP 5.3.3之前的php来说，是一个补丁包[1]  ，旨在将FastCGI进程管理整合进PHP包中。如果你使用的是PHP5.3.3之前的PHP的话，就必须将它patch到你的PHP源代码中，在编译安装PHP后才可以使用。 相对Spawn-FCGI，PHP-FPM在CPU和内存方面的控制都更胜一筹，而且前者很容易崩溃，必须用crontab进行监控，而PHP-FPM则没有这种烦恼。

龙生   01 Oct 2017
View Details

C#中正则表达式在replace中的应用

多少年来，许多的编程语言和工具都包含对正则表达式的支持，.NET基础类库中包含有一个名字空间和一系列可以充分发挥规则表达式威力的类，而且它们也都与未来的Perl 5中的规则表达式兼容。 此外，regexp类还能够完成一些其他的功能，例如从右至左的结合模式和表达式的编辑等。 在这篇文章中，我将简要地介绍System.Text.RegularExPRession中的类和方法、一些字符串匹配和替换的例子以及组结构的详细情况，最后，还会介绍一些你可能会用到的常见的表达式。 应该掌握的基础知识 规则表达式的知识可能是不少编程人员“常学常忘”的知识之一。在这篇文章中，我们将假定你已经掌握了规则表达式的用法，尤其是Perl 5中表达式的用法。.NET的regexp类是Perl 5中表达式的一个超集，因此，从理论上说它将作为一个很好的起点。我们还假设你具有了C#的语法和.NET架构的基本知识。 如果你没有规则表达式方面的知识，我建议你从Perl 5的语法着手开始学习。在规则表达式方面的权威书籍是由杰弗里·弗雷德尔编写的《掌握表达式》一书，对于希望深刻理解表达式的读者，我们强烈建议阅读这本书。 RegularExpression组合体 regexp规则类包含在System.Text.RegularExpressions.dll文件中，在对应用软件进行编译时你必须引用这个文件，例如： csc r:System.Text.RegularExpressions.dll foo.cs 命令将创建foo.exe文件，它就引用了System.Text.RegularExpressions文件。 名字空间简介 在名字空间中仅仅包含着6个类和一个定义，它们是： Capture: 包含一次匹配的结果； CaptureCollection: Capture的序列； Group: 一次组记录的结果，由Capture继承而来； Match: 一次表达式的匹配结果，由Group继承而来； MatchCollection: Match的一个序列； MatchEvaluator: 执行替换操作时使用的代理； Regex: 编译后的表达式的实例。 Regex类中还包含一些静态的方法： Escape: 对字符串中的regex中的转义符进行转义； IsMatch: 如果表达式在字符串中匹配，该方法返回一个布尔值； Match: 返回Match的实例； Matches: 返回一系列的Match的方法； Replace: 用替换字符串替换匹配的表达式； Split: 返回一系列由表达式决定的字符串； Unescape:不对字符串中的转义字符转义。 简单匹配 我们首先从使用Regex、Match类的简单表达式开始学习。 Match m = Regex.Match("abracadabra", "(a|b|r)+"); 我们现在有了一个可以用于测试的Match类的实例，例如：if (m.Success)… 如果想使用匹配的字符串，可以把它转换成一个字符串： Console.WriteLine("Match="+m.ToString()); 这个例子可以得到如下的输出: Match=abra。这就是匹配的字符串了。 字符串的替换 简单字符串的替换非常直观。例如下面的语句： string s = Regex.Replace("abracadabra", "abra", "zzzz"); 它返回字符串zzzzcadzzzz，所有匹配的字符串都被替换成了zzzzz。 现在我们来看一个比较复杂的字符串替换的例子： string s = Regex.Replace(" abra ", @"^\s*(.*?)\s*$", "$1"); 这个语句返回字符串abra，其前导和后缀的空格都去掉了。 上面的模式对于删除任意字符串中的前导和后续空格都非常有用。在C#中，我们还经常使用字母字符串，在一个字母字符串中，编译程序不把字符“ \” 作为转义字符处理。在使用字符“\”指定转义字符时，@"…"是非常有用的。另外值得一提的是$1在字符串替换方面的使用，它表明替换字符串只能包含被替换的字符串。 匹配引擎的细节 现在，我们通过一个组结构来理解一个稍微复杂的例子。看下面的例子： string text = "abracadabra1abracadabra2abracadabra3"; string […]

龙生   29 Sep 2017
View Details

nginx ssl配置

1. 全站ssl 全站做ssl是最常见的一个使用场景，默认端口443，而且一般是单向认证。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
server {
        listen 443;
        server_name example.com;
 
        root /apps/www;
        index index.html index.htm;
 
        ssl on;
        ssl_certificate ../SSL/ittest.pem;
        ssl_certificate_key ../SSL/ittest.key;
 
#        ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
#        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
#        ssl_prefer_server_ciphers on;
 
}

  如果想把http的请求强制转到https的话：

1
2
3
4
5
6
7
8
server {
  listen      80;
  server_name example.me;
  rewrite     ^   https://$server_name$request_uri? permanent;
 
### 使用return的效率会更高
#  return 301 https://$server_name$request_uri;
}

  ssl_certificate证书其实是个公钥，它会被发送到连接服务器的每个客户端，ssl_certificate_key私钥是用来解密的，所以它的权限要得到保护但nginx的主进程能够读取。当然私钥和证书可以放在一个证书文件中，这种方式也只有公钥证书才发送到client。 ssl_protocols指令用于启动特定的加密协议，nginx在1.1.13和1.0.12版本后默认是ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2，TLSv1.1与TLSv1.2要确保OpenSSL >= 1.0.1 ，SSLv3 现在还有很多地方在用但有不少被攻击的漏洞。 ssl_ciphers选择加密套件，不同的浏览器所支持的套件（和顺序）可能会不同。这里指定的是OpenSSL库能够识别的写法，你可以通过 openssl -v cipher 'RC4:HIGH:!aNULL:!MD5’（后面是你所指定的套件加密算法） 来看所支持算法。 ssl_prefer_server_ciphers on设置协商加密算法时，优先使用我们服务端的加密套件，而不是客户端浏览器的加密套件。 https优化参数 ssl_session_cache shared:SSL:10m; : 设置ssl/tls会话缓存的类型和大小。如果设置了这个参数一般是shared，buildin可能会参数内存碎片，默认是none，和off差不多，停用缓存。如shared:SSL:10m表示我所有的nginx工作进程共享ssl会话缓存，官网介绍说1M可以存放约4000个sessions。 详细参考serverfault上的问答ssl_session_cache。 ssl_session_timeout ： 客户端可以重用会话缓存中ssl参数的过期时间，内网系统默认5分钟太短了，可以设成30m即30分钟甚至4h。 设置较长的keepalive_timeout也可以减少请求ssl会话协商的开销，但同时得考虑线程的并发数了。 提示：在生成证书请求csr文件时，如果输入了密码，nginx每次启动时都会提示输入这个密码，可以使用私钥来生成解密后的key来代替，效果是一样的，达到免密码重启的效果：   HTTPS服务器优化 SSL操作需要消耗CPU资源，所以在多处理器的系统，需要启动多个工作进程，而且数量需要不少于可用CPU的个数。最消耗CPU资源的SSL操作是SSL握手，有两种方法可以将每个客户端的握手操作数量降到最低：第一种是保持客户端长连接，在一个SSL连接发送多个请求，第二种是在并发的连接或者后续的连接中重用SSL会话参数，这样可以避免SSL握手的操作。会话缓存用于保存SSL会话，这些缓存在工作进程间共享，可以使用ssl_session_cache指令进行配置。1M缓存可以存放大约4000个会话。默认的缓存超时是5分钟，可以使用ssl_session_timeout加大它。下面是一个针对4核系统的配置优化的例子，使用10M的共享会话缓存：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
worker_processes  4;
 
http {
    ssl_session_cache    shared:SSL:10m;
    ssl_session_timeout  10m;
 
    server {
        listen              443;
        server_name         www.example.com;
        keepalive_timeout   70;
 
        ssl                 on;
        ssl_certificate     www.example.com.crt;
        ssl_certificate_key www.example.com.key;
        ssl_protocols       SSLv3 TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers         HIGH:!aNULL:!MD5;

  from:http://blog.csdn.net/mr_raptor/article/details/51854746

龙生   29 Sep 2017
View Details

Eclipse下导入外部jar包的3种方式

我们在用Eclipse开发程序的时候，经常要用到第三方jar包。引入jar包不是一个小问题，由于jar包位置不清楚，而浪费时间。下面配图说明3种Eclipse引入jar包的方式。 1.最常用的普通操作方式:基本步骤式 右击“项目”→选择Properties，在弹出的对话框左侧列表中选择Java Build Path，如下图所示：选择Add External JARs，就可以逐个（也可以选择多个jar，但是限制在同一个文件夹中）添加第三方引用jar包。     上面这种方式的操作具有通用性，但是每次创建项目，都需要重新引入Jar包，Jar包不具有可重用性。 2.快速版的操作方式:用户Jar包式 右击“项目”→选择Properties，在弹出的对话框左侧列表中选择Java Build Path，弹出如上图所示的对话框，这里选择"Add Library"，弹出如下图所示对话框，选择"User Library"，然后选择→Next   在出现的对话框中，可以选择已经创建好的用户自定义库，也可以选择User Libraries，弹出的新对话框中选择"New"，创建新的用户自定义库。   在待创建用户自定义库中，输入新的自定义库的名字,如下图   然后为新库，添加所需的Jar包 按上述步骤添加好用户自定义库后，以后可以重用这些已定义好的User Library库，为开发节省时间。   3.快速版的操作方式:文件夹导入式 在项目中，创建新的文件夹（eg:ibatis_jar），如下图所示，本示例中创建了ibatis_jar文件夹 ，并将项目开发需要的第三方的jar包拷贝到该文件夹中。 选中需要添加到项目中的jar包，右键选择"Build PathàAdd to Build Path"，这样Jar包就成功导入到项目中了。 第三种导入Jar包的方式比第二种更简单，而且重用性更强，当我们不同的机器上查找所需的Jar包时，将这些文件夹直接拷贝就可以。 暂时对Eclipse导入jar包有这些浅显的理解，随着经验的积累，对Eclipse引入jar包各种方式的区别会理解的更深入！ FROM:http://blog.csdn.net/mazhaojuan/article/details/21403717

龙生   27 Sep 2017
View Details

安装集成PHP开发环境出现“计算机中丢失 MSVCR110.dll”问题

今日在安装PHP环境时出现下列问题 于是乎去网站搜索并下载了MSVCR110.dll。解压后，将MSVCR110.dll放在了C:\\windows\SysWOW64(64位系统，32系统放在C:\WINdows\system32)下面，然后window+R(启动运行),输入cmd,在输入regsvr32 msvcr110.dll，以为问题得以解决，然而又出现下列问题 后又"咨询下了百度"，问题才得以解决。解决步骤如下： 1.下载Visual C++ Redistrbutable for Visual Studio 2012 Update 4. 地址： http://www.microsoft.com/zh-CN/download/details.aspx?id=30679 ，进入该网页 2.选择语言：中文简体，然后点击下载 3.根据电脑系统(32位，64位)选择适合自己的版本。 4.点击Next，出现新建下载任务，点击下载就OK了。 5.下载完后，运行下载的exe文件。 6.在运行PHP环境就没问题了。   from:http://www.cnblogs.com/-scl/p/4198746.html

龙生   27 Sep 2017
View Details

apache commons

Apache Commons是Apache软件基金会的项目，曾隶属于Jakarta项目。Commons的目的是提供可重用的、开源的Java代码。 Apache Commons项目的由三部分组成： The Commons Proper – 一个可重用的Java组件库。(已经发布过的) The Commons Sandbox – Java组件开发工作区. (正在开发的项目) The Commons Dormant – 当前处于非活动状态的组件库.(刚启动或者已经停止维护的项目) 建立和维护可重用的Java组件。使用组件可以提高开发效率和质量。

龙生   27 Sep 2017
View Details

现在的互联网是各家“云”集

现在的云服务可是真多啊，百度一下，排名如下： 华为云（广告） 京东云（广告） 腾讯云（广告） 亚马逊AWS（广告） 网易云（广告） 阿里云 金山云 大佬们都做云，中国的互联网+可是如火如荼。

龙生   26 Sep 2017
View Details
1 … 219 220 221 … 410

Copyright © 2025 Longsheng All rights reserved