每天10个前端知识点：运动框架应用篇(下)
2017-02-13 本文已影响181人
WangChloe
个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客
以下内容若有问题烦请即时告知我予以修改，以免误导更多人。
本次内容：打字依次显示效果、收起当前页放出下一页效果、分块运动、无缝幻灯片、带进度条的无缝幻灯片
10. 打字依次显示效果
<style>
body {
background: #000;
}
span {
color: #fff;
font-size: 20px;
opacity: 0;
}
</style>
<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. 收起当前页放出下一页效果
<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>
<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>
<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. 分块运动
- 自定义行数R、列数C
- 创建span
计算oSpan的width、height、left、top、background-position
注意：先appendChild才能获取oSpan的offsetWidth和offsetHeight
- 分步运动，依次显示span
优化：setInterval可用for循环+setTimeout替代，可设置行列相关时同一时间出现
<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>
<div id='btn'>点击随机变换</div>
<div id="box"></div>
<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框架应用 - 感应变大效果
更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！
公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。
微信公众号：无媛无故
