前端入坑纪 07
转瞬又是周三，单休的宝宝表示再干三天，又有得休息了。怎么感觉有点自我安慰的赶脚？
今天把项目中一个飘飘的效果做好了，就是代码真有点长。讲真，这个效果在手机上确实有点卡，也不晓得是不是我目前水平的关系。唉，漫漫web前端路，不知其所止......
某时刻截图
一等大事：项目链接
HTML 结构
<div class="wrap">
</div>
页面里就是8张图片，不晓得为什么图片标签发布后全变了。大家脑补都是html 的图片标签
CSS 结构
html,
body {
height: 100%
}
* {
margin: 0;
padding: 0
}
.wrap {
background-color: #2F67A8;
height: 100%
}
.sparks {
height: 50px;
transition-property: top left;
transition: 5s linear;
position: fixed;
}
div.wrap img.sparks:nth-child(1) {
animation: rots 5s linear infinite alternate .4s
}
div.wrap img.sparks:nth-child(2) {
animation: rots 5s linear infinite alternate .7s
}
div.wrap img.sparks:nth-child(3) {
animation: rots1 5s linear infinite alternate 1.1s
}
div.wrap img.sparks:nth-child(4) {
animation: rots1 5s linear infinite alternate 1.7s
}
div.wrap img.sparks:nth-child(5) {
animation: rots 5s linear infinite alternate .6s
}
div.wrap img.sparks:nth-child(6) {
animation: rots 5s linear infinite alternate .35s
}
div.wrap img.sparks:nth-child(7) {
animation: rots1 5s linear infinite alternate 1.1s
}
div.wrap img.sparks:nth-child(8) {
animation: rots1 5s linear infinite alternate 1.3s
}
@keyframes rots {
0% {
transform: rotateZ(38deg)
}
50% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(-38deg)
}
}
@keyframes rots1 {
0% {
transform: rotateZ(-58deg)
}
50% {
transform: rotateZ(0)
}
100% {
transform: rotateZ(58deg)
}
}
css 给每个图片添加不同的延时，不同的转角度数，我这只写了两个度数效果
简单示意
JavaScript 结构
var winH = window.innerHeight,
winW = window.innerWidth,
i = j = 0,
Otarget = document.getElementsByClassName("sparks");
// 变换元素的位置坐标
function chanPos(aimer, a, b) {
Otarget[aimer].style.left = a + "px";
Otarget[aimer].style.top = b + "px";
}
// a到b之间的整数
function ranges(a, b) {
return Math.floor(Math.random() * (b - a) + a)
}
// 整体效果
function sparkMov(aimer) {
// 获取元素对象的当前位置属性
var lefta = parseInt(Otarget[aimer].style.left),
topb = parseInt(Otarget[aimer].style.top);
// 重启过渡的效果
Otarget[aimer].style.transitionProperty = "all";
// 用三元表达式使50%机率加减随机数，决定了向左还是向右移动
var movPos = ranges(1, 10) < 5 ? ranges(20, 70) : (-ranges(20, 70));
//元素left位置的随机取值，以及超过屏幕宽度时，减小left
switch (true) {
case (lefta < 0):
lefta = lefta + ranges(50, 80);
break;
case (lefta > winW):
lefta = lefta - ranges(50, 80);
break;
default:
lefta = lefta + movPos;
}
//元素top位置的随机取值，以及超过屏幕高度时，回到屏幕的最上部
switch (true) {
case (topb < 0):
topb = topb + 50;
break;
case (topb > winH):
lefta = ranges(10, winW);
topb = -ranges(60, 70);
// 飘至底部时去除过渡的效果，免得元素在页面上出现往上飘的效果
Otarget[aimer].style.transitionProperty = "none";
break;
default:
topb = topb + ranges(50, 100);
}
//将算好的随机位置付给aimer元素对象
chanPos(aimer, lefta, topb);
}
// 页面加载时，给定初始随机位置
for (i; i < Otarget.length; i++) {
// 这里是闭包的形式读到循环中对应的i，否则都是循环最后的那个值
(function() {
chanPos(i, ranges(25, winW - 30), -ranges(60, 155))
})(i);
}
//每隔5000ms变更位置
function roler() {
for (j = 0; j < Otarget.length; j++) {
// 这里是闭包的形式读到循环中对应的j
(function() {
sparkMov(j)
})(j)
}
}
setInterval(roler, 5000);
基本结合示意图和javascript里的备注，应该很好理解了，加油～～～
