-
Notifications
You must be signed in to change notification settings - Fork 33
/
drip.html
487 lines (475 loc) · 26.8 KB
/
drip.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
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="张小月,Redspite,web前端简历,个人博客,web前端,前端博客">
<meta name="description" content="WEB前端工程师——RedSpite的自学之路，个人博客知识笔记与心得记录">
<meta name="author" content="张小月,Redspite">
<title>点滴 » RedSpite个人学习小站</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/base.css" type="text/css">
<style>
@media only screen and (max-width:1024px) {
#music {
right: 20px;
bottom: 20%;
}
}
p {
text-indent: 0!important;
}
</style>
<!--[if lte IE 9]>
<script type="text/javascript">
window.location = "http://www.xiaoyuezhang.com/error.html"
</script>
<![endif]-->
<!-- xiaoyuezhang.com Baidu tongji analytics -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?f87e415f9d1f6111b1d34c5f96927d9b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="content">
<div class=" container">
<div id="music">
<img src="image/music.png" alt="音乐">
<audio id="myAudio" autoplay loop hidden="true">
<source src="media/bm.mp3" type="audio/mpeg">
<source src="media/bm.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</div>
<div id="top">
<img src="image/top.png" alt="回到顶部">
</div>
<div class="header-box">
<img src="image/header.jpg" alt="我的头像">
</div>
<div class="center">
<p class="myid">RedSpite</p>
</div>
<div class="my-sort center">
<a href="index.html">简历</a>
<a href="drip.html">点滴</a>
<a href="message.html">留言</a>
</div>
<div id="artical">
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/vue170717.html">
<span class="trig"></span>
<span class="dates">2017.07.27</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title">
<a href="/artical/vue170717.html">express+mongoDB建立与前端通信的数据库</a>
</p>
<div class="col-md-5 col-xs-8 art-img">
<img src="/image/s24.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>
学习过程中所记录的笔记，按着步骤来可以自己搭建一个能通信的服务器，遇到不懂的地方问度娘。 在 我的码云和github上有搭建完成后的代码，前端用的Vue框架。 不完善的地方还在修改ing~
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/cordova.html">
<span class="trig"></span>
<span class="dates">2017.02.22</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/cordova.html">神奇的Cordova -- 利用H5进行APP开发</a></p>
<div class="col-md-4 col-xs-8 art-img">
<img src="/image/s20.jpg" alt="文章配图">
</div>
<div class="col-md-6 col-xs-10 art-detail">
<p>
一直以来app的开发都分为android版本和ios版本,同一款app需要写两种版本，版本有差异不说，耗费的成本加成。 cordova的出现就是一股清流，它能实现将h5页面打包成android或ios版本，实现了android、ios、pc端页面的统一。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/googleMap.html">
<span class="trig"></span>
<span class="dates">2016.12.15</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/googleMap.html">谷歌地图初触电</a></p>
<div class="col-md-5 col-xs-9 art-img">
<img src="/image/s19.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>
最近的项目里面用到了谷歌地图，以前开发过百度地图，但是都涉足很浅很浅，虽然这次也只用到了<span class="cspan">drawingManager</span> 下面几个画图组件。 氮素！写几百行的代码实现出功能，这样充实的学习过程很令人满足讷。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/1114.html">
<span class="trig"></span>
<span class="dates">2016.11.14</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/1114.html">快一个月没写文章总结了</a></p>
<div class="col-md-3 col-xs-9 art-img">
<img src="/image/s18.jpg" alt="文章配图">
</div>
<div class="col-md-7 col-xs-10 art-detail">
<p>
最近换工作，忙着找房子+搬家+努力生活，忙得已经近一个月没写总结了，虽然没写，但是我对前端滴热情一如以往。 最近在学习微信小程序，微信小程序是个坑啊，才推出一两个月，api已经废除了好多了。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/3dRotate.html">
<span class="trig"></span>
<span class="dates">2016.10.19</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/3dRotate.html">纯css实现盒子 3D 旋转效果</a></p>
<div class="col-md-3 col-xs-9 art-img">
<img src="/image/s17.jpg" alt="文章配图">
</div>
<div class="col-md-7 col-xs-10 art-detail">
<p>平时看到动画下意识就觉得很难，出于畏惧心理老是不敢去碰，就像看到一个漂亮女生不敢上去搭讪(。。)。 拔过嘛，再难得东西都是禁不住你死缠烂打的（追姑娘同理 哈哈哈。。）所以现在就从头理理，这个3d效果究竟是怎么实现的。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/animate.html">
<span class="trig"></span>
<span class="dates">2016.10.15</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/animate.html">各种常见的鼠标悬停css3动画效果</a></p>
<div class="col-md-5 col-xs-9 art-img">
<img src="image/s15.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>平时需要用到的鼠标悬停效果，基本上都是css3的结合。 代码就不放了，直接右键看即可。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/stars.html">
<span class="trig"></span>
<span class="dates">2016.10.14</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/stars.html">星星打分插件简易版</a></p>
<div class="col-md-4 col-xs-9 art-img">
<img src="image/s14.jpg" alt="文章配图">
</div>
<div class="col-md-6 col-xs-10 art-detail">
<p>最近很怠惰呢，冬天是一个让人不想动弹的季节，我也懒得不想写简介了。 总而言之言而总之就是字面上的意思，做评论的时候需要用到的星星打分。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/3dCard.html">
<span class="trig"></span>
<span class="dates">2016.10.11</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/3dCard.html">抽牌效果之banner轮播</a></p>
<div class="col-md-8 col-xs-9 art-img">
<img src="image/s11.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>banner轮播方式真的很多，这也算一种特别的轮播方式了。CSS3和JQ结合，打造超炫轮播切换效果。</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/grid.html">
<span class="trig"></span>
<span class="dates">2016.10.08</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/grid.html">网格算法配合CSS3，实现多彩绚丽的图片切换效果</a></p>
<div class="col-md-3 col-xs-9 art-img">
<img src="image/s10.jpg" alt="文章配图">
</div>
<div class="col-md-7 col-xs-10 art-detail">
<p>平时喜欢在网上看看同行的博客，看到一个很好看的图片切换效果，很炫酷，果断学来了~ 哈哈。 这是利用4个div显示同一图片的不同区域，css控制各图片位置，进行显示与隐藏，再给图片加上transition时长，就能形成华丽的视觉效果。 很多看似炫酷的效果，究其原理还是很简单的。
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/mBanner.html">
<span class="trig"></span>
<span class="dates">2016.10.05</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/mBanner.html">移动端自适应banner轮播 手写</a></p>
<div class="col-md-6 col-xs-9 art-img">
<img src="image/s12.jpg" alt="文章配图">
</div>
<div class="col-md-4 col-xs-10 art-detail">
<p>随着移动设备普及率越来越高，我们前端工程师现在必须掌握h5页面的书写了。 手机端展示方式不需要太复杂，毕竟屏幕只有这么大嘛不是，所以能搞得花样也不多，运用最多的就是轮播了吧！
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="bjq.html">
<span class="trig"></span>
<span class="dates">2016.09.22</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="bjq.html">带表情包的编辑器手写插件</a></p>
<div class="col-md-4 col-xs-9 art-img">
<img src="image/s8.jpg" alt="文章配图">
</div>
<div class="col-md-6 col-xs-10 art-detail">
<p>说到文本输入，我们常用的有 textarea 还有input[type="text"]，这两位能完成基本的文本输入。 可是当我们希望评论区域趣味一点，追求更高一点的时候捏，这两位就都得靠边站了，为啥？ 因为都不支持图片输入啊~ 如果往里面插入图片，他两是没有反应的。</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/imgsize.html">
<span class="trig"></span>
<span class="dates">2016.09.21</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/imgsize.html">纯css响应式图片尺寸比例固定</a></p>
<div class="col-md-9 col-xs-9 art-img">
<img src="image/s7.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>当能用的图片是从第三方引过来，我们不能控制图片的尺寸，而且图片大小还不能写成定值的时候,似乎只剩用js动态写一条路了，初期的我也是用了这个方法。 可是js写第一太麻烦不灵活，window.resize每次窗口缩放都要 运行一边代码，无疑这加重了浏览器负担。 二是就算js写也是定值像素，图片会被压缩变形
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/gradients.html">
<span class="trig"></span>
<span class="dates">2016.08.01</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/gradients.html">CSS3 渐变背景色各种方向 兼容IE9+</a></p>
<div class="col-md-3 col-xs-9 art-img">
<img src="image/s1.jpg" alt="文章配图">
</div>
<div class="col-md-7 col-xs-10 art-detail">
<p>在前端书写网页实际运用中，单一的背景色并不能很好地满足需要，在不使用图片资源的选择下， 我们还可以使用渐变背景色使自己的页面更丰富,运用的最多的线性渐变分为：横向、纵向、对角渐变三种渐变…
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/hideScroll.html">
<span class="trig"></span>
<span class="dates">2016.07.30</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/hideScroll.html">去掉丑丑的滚动条 div仍然能滚动</a></p>
<div class="col-md-4 col-xs-9 art-img">
<img src="image/s2.jpg" alt="文章配图">
</div>
<div class="col-md-6 col-xs-10 art-detail">
<p>工作的时候容易遇到这种情况：页面某一区域需要滚动，但并不想浏览器自带的滚动条出现,而各个浏览器的滚动条各不相同，宽度、颜色都不统一。为了美观，优化这些风格不一的滚动条 也是前端工作中必须要做的事~
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/banner.html">
<span class="trig"></span>
<span class="dates">2016.07.26</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/banner.html">全屏自适应 热点图轮播banner简洁代码</a></p>
<div class="col-md-6 col-xs-9 art-img">
<img src="image/s3.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>从我零开始接触前端，学的第一个特效就是banner轮播。js语言和c语言有很多相似之处，所以真是庆幸大学有好好考计算机二级呀。。汗！ 初级小白通过自己一点一点摸索，总算写出了这个自适应大小的banner轮播图，可以无缝轮播，并自适应屏幕大小按比例缩小图片。…
</p>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals">
<div class="dotts"></div>
<a class="my-date" href="/artical/triang.html">
<span class="trig"></span>
<span class="dates">2016.07.25</span>
</a>
<div class="ar-container">
<div class="my-line"></div>
<div class="ar-content">
<p class="art-title"><a href="/artical/triang.html">纯CSS绘制三角形（各种角度）</a></p>
<div class="col-md-5 col-xs-9 art-img">
<img src="image/s4.jpg" alt="文章配图">
</div>
<div class="col-md-10 col-xs-10 art-detail">
<p>前阵子做的设计图里面有用到三角形，以前自学的时候漏掉了，暂且放这儿看看吧~ 通过改变border宽度 可以得到各种不同形状的三角形…</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="my-artical">
<div class="articals" style="min-height: 3em;">
<div class="dotts"></div>
</div>
</div>
<p class="center beian">© RedSpite | <a href="http://www.miitbeian.gov.cn/publish/query/indexFirst.action">蜀ICP备16004270号</a></p>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
//头像淡入
$(".header-box").addClass("fadein");
//回到顶部
$("#top").click(function() {
$('html,body').animate({
scrollTop: 0
}, 700);
});
showScroll();
var min_height = document.documentElement.clientHeight / 2;
function showScroll() {
$(window).scroll(function() {
var s = $(window).scrollTop();
s > min_height ? $('#top').fadeIn() : $('#top').fadeOut();
});
}
//音乐关闭
$("#music").bind("click", function() {
$(this).toggleClass("pause");
var audio = $("#music audio")[0];
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
} else {
audio.pause(); // 这个就是暂停
}
});
});
</script>
<script>
(function() {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body>
</html>