每天10个前端知识点：运动框架应用篇(下)

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容：打字依次显示效果、收起当前页放出下一页效果、分块运动、无缝幻灯片、带进度条的无缝幻灯片

10. 打字依次显示效果

1
2
3
4
5
6
7
8
9
10
<style>
	body {
		background: #000;
	}
	span {
		color: #fff;
		font-size: 20px;
		opacity: 0;
	}
</style>
1
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
<script type="text/javascript" src='move.js'></script>
<script>
	window.onload = function () {
		var str = '往左走(left负数)W = oUl.offsetWidth / 2;left -= 5;left = left % W;往右走(left正数)W = oUl.offsetWidht / 2;left += 5;left = (left % W - W) % W;';
		for(var i = 0; i < str.length; i++) {
			var oS = document.createElement('span');
			oS.innerHTML = str.charAt(i);
			document.body.appendChild(oS);
		}

		var aSpan = document.body.children;
		var i = 0;

		// 分步运动
		var timer = setInterval(function() {
			move(aSpan[i], {opacity: 1}, {duration: 100});
			i++;
			if(i == aSpan.length) {
				clearInterval(timer);
			}
		}, 100);

	}
</script>

效果示例
move框架应用 - 打字依次显示效果

11. 收起当前页放出下一页效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
	* {
	    margin: 0;
	    padding: 0;
	}
	ul {
	    width: 516px;
	    margin: 50px auto;
	}
	ul li {
	    list-style: none;
	    width: 150px;
	    height: 150px;
	    background: #ccc;
	    float: left;
	    margin: 10px;
	    border: 1px solid #000;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" value="下一页" id="btn1" />
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
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
<script type="text/javascript" src='move.js'></script>
<script>
	window.onload = function() {
	    var oBtn = document.getElementById('btn1');
	    var oUl = document.getElementById('ul1');
	    var aLi = oUl.children;

	    // 浮动定位 -> 绝对定位
	    var aPos = [];
	    for (var i = 0; i < aLi.length; i++) {
	        aPos[i] = {
	            left: aLi[i].offsetLeft,
	            top: aLi[i].offsetTop
	        };
	    }
	    for (var i = 0; i < aLi.length; i++) {
	        aLi[i].style.position = 'absolute';
	        aLi[i].style.left = aPos[i].left + 'px';
	        aLi[i].style.top = aPos[i].top + 'px';
	        aLi[i].style.margin = 0;
	    }

	    var timer = null;
	    var bSin = false;
	    oBtn.onclick = function() {
	        if (bSin) return;
	        bSin = true;

	        // 分步运动
	        var i = 0;
	        timer = setInterval(function(){
	            (function(index){
	                // 收起
	                move(aLi[i], {
	                    left: 0, top:0, width: 0,
	                    height: 0, opacity: 0
	                },{
	                    complete: function() {	// 回调函数
	                        if (index == aLi.length-1) {
	                            // 放出
	                            for (var i = 0; i < aLi.length; i++) {
	                                aLi[i].style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
	                            }

	                            timer = setInterval(function(){
	                                (function(index2){
	                                    move(aLi[index], {
	                                        left: aPos[index].left, top: aPos[index].top, width: 150, height: 150, opacity: 1
	                                    },{
	                                        complete: function(){
	                                            if (index2 == 0) {
	                                            	// 放出最后一张后点击才有效
	                                                bSin = false;
	                                            }
	                                        }
	                                    });
	                                })(index);

	                                index--;
	                                if (index < 0) {
	                                    clearInterval(timer);
	                                }
	                            },200);
	                        }
	                    }
	                })
	            })(i);

	            i++;
	            if (i == aLi.length) {
	                clearInterval(timer);
	            }
	        },200);
	    };
	};
</script>

效果示例
move框架应用 - 收起当前页放出下一页效果

12. 分块运动

  1. 自定义行数R、列数C

  2. 创建span
    计算oSpan的width、height、left、top、background-position

    注意：先appendChild才能获取oSpan的offsetWidth和offsetHeight

  3. 分步运动，依次显示span

优化：setInterval可用for循环+setTimeout替代，可设置行列相关时同一时间出现

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
<style>
	* {
		margin: 0;
		padding: 0;
	}
	#btn{
		margin: 20px auto;
		padding: 5px;
		width: 100px;
		height: 20px;
		background: #f5850e;
		color: #fff;
		font-size: 16px;
		text-align: center;
		line-height: 20px;
		border-radius: 5px;
		cursor: pointer;
	}
	#box {
		position: relative;
		margin: 50px auto;
		width: 500px;
		height: 300px;
		background: url('img/slide0.jpg');
	}
	#box span{
		position: absolute;
		opacity: .1;
		/* opacity: 0; */
	}
</style>
1
2
<div id='btn'>点击随机变换</div>
<div id="box"></div>
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
<script type="text/javascript" src='move.js'></script>
<script>
	window.onload = function() {
		var oBtn = document.body.children[0];
		var oBox = document.body.children[1];

		var R = 3;
		var C = 5;

		// 整图 -> 分块(绝对定位)
		for(var r = 0; r < R; r++) {
			for(var c = 0; c < C; c++) {
				var oSpan = document.createElement('span');
				oSpan.style.width = oBox.offsetWidth / C + 'px';
				oSpan.style.height = oBox.offsetHeight / R + 'px';
				oBox.appendChild(oSpan);
				oSpan.style.left = oSpan.offsetWidth * c + 'px';
				oSpan.style.top = oSpan.offsetHeight * r + 'px';
				oSpan.style.backgroundPosition = - oSpan.offsetWidth * c + 'px ' + (-oSpan.offsetHeight * r) + 'px';
				oSpan.r = r;
				oSpan.c = c;
			}
		}

		var aSpan = oBox.children;
		var iNow = 0;
		var bSin = false;

		oBtn.onclick = function() {
			if(bSin) {return;}
			bSin = true;
			iNow++;
			oBox.style.background = 'url("img/slide'+ (iNow%9-1+9)%9 +'.jpg")';

			block(parseInt(Math.random()*7+1));		// 随机变换显示方式
		}

		var json = {};
		for(var i = 0; i < 8; i++) {
			json[i] = 0;
		}

		function block(method) {
			json[method]++;
			var med = 1;
			for(var i = 0; i < aSpan.length; i++) {
				(function(index) {
					switch(method) {
						case 1: med = index;
							break;
						case 2: med = aSpan[index].r + aSpan[index].c;  // 斜角显示
							break;
						case 3: med = aSpan[index].r * aSpan[index].c;
							break;
						case 4: med = aSpan[index].r - aSpan[index].c;
							break;
						case 5: med = aSpan[index].r / aSpan[index].c;
							break;
						case 6: med = aSpan.length - index;  // 由下至上
							break;
						case 7: med = Math.random();
							break;
					}
					setTimeout(function(){
						aSpan[index].style.backgroundImage = 'url("img/slide'+ iNow%9 + '.jpg")';
						aSpan[index].style.opacity = 0.1;
						(function(index2) {
							move(aSpan[index], {opacity: 1}, {complete: function() {
									if(index2 == aSpan.length - 1) {
										// 放出最后一个分块后点击才有效
										bSin = false;
									}
							}});
						})(index);
					}, 100*(med));	// 每个分块延迟时间不同，达到依次显示的效果
				})(i);
			}
		}
	}
</script>

效果示例
move框架应用 - 分块运动

13. 仿Mac 感应变大效果

  1. 感应距离：一般为500

    比例：scale = 1 - c/500;

  2. 勾股定理计算鼠标至图片中心距离

    var a = getPos(aImg[i]).left + aImg[i].offsetWidth / 2 - oEvent.clientX;

    var b = getPos(aImg[i]).top + aImg[i].offsetHeight / 2 - oEvent.clientY;

    var c = Math.sqrt(a a + b b);

  3. 计算方放大比例，范围为[0.5, 1]
    var scale = 1 - c / 500;
    scale < 0.5 && (scale = 0.5);
    aImg[i].style.width = scale * 80 + ‘px’;

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
	* {
		margin: 0;
		padding: 0;
	}

	#box {
		position: absolute;
		bottom: 20px;
		width: 100%;
		text-align: center;
	}
</style>
1
2
3
4
5
<div id="box">
	<img src="img/per-1.png" width="40">
	<img src="img/per-2.png" width="40">
	<img src="img/per-3.png" width="40">
</div>
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
<script>
	function getPos(obj) {
		var l = 0;
		var t = 0;
		while(obj) {
			l += obj.offsetLeft;
			t += obj.offsetTop;
			obj = obj.offsetParent;
		}

		return {left: l, top: t};
	}
	window.onload = function() {
		var oBox = document.body.children[0];
		var aImg = oBox.children;

		document.onmousemove = function(ev) {
			var oEvent = ev || event;
			for(var i = 0; i < aImg.length; i++) {

				// 勾股定理计算鼠标至图片中心距离
				var a = getPos(aImg[i]).left + aImg[i].offsetWidth / 2 - oEvent.clientX;
				var b = getPos(aImg[i]).top + aImg[i].offsetHeight / 2 - oEvent.clientY;
				var c = Math.sqrt(a * a + b * b);

				//计算方放大比例，范围为[0.5, 1]
				var scale = 1 - c / 500;
				scale < 0.5 && (scale = 0.5);
				aImg[i].style.width = scale * 80 + 'px';
			}
		}
	}
</script>

效果示例
move框架应用 - 感应变大效果

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
微信公众号：无媛无故

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true