多彩小球
1、首先第一步,先把css样式写好:
*
.box{
position:absolute;
left:0;
top:0;
width: 80px;
height: 80px;
background:-webkit-linear-gradient(rgb(255,255,255),rgb(122, 180, 13));
border-radius:50%;
}
2、因为是动态生成,所以不需要在body标签写入 .box 类名标签。直接写入 js语句;
time(10); // 自执行 括号中有10,所以生成10个小球,用num 形参来接收
function time(num){
for(var i = 0; i
var Box = document.createElement("div"); // 创建元素节点,
Box.className = "box"; // 给Box变量添加 类名为.box跟css样式对应
Box.style.background = yan(); // 给Box变量添加背影颜色yan()只是个函数自执行
document.body.appendChild(Box); //把Box标签写入body标签里。
// 定义每个小球的变化量
Box.Le = 3 + i;
Box.To = 3 + i;
};
var aBox = document.querySelectorAll(".box"); // 获取所有的.box类名标签
// 获取可视区窗口 ,获取到浏览器的窗口和aBox元素的宽高
var maxH = document.documentElement.clientHeight - aBox[0].clientHeight;
var maxW = document.documentElement.clientWidth - aBox[0].clientWidth;
// 重定义可视区 width height
window.onresize = function (){
maxH = document.documentElement.clientHeight - aBox[0].clientHeight;
maxW = document.documentElement.clientWidth - aBox[0].clientWidth;
}
setInterval(timer,13); // 定时器没过13毫秒执行一次
function timer(){
for(var i = 0; i
var bian = aBox[i]
// 获取元素定位的 left top
var Left = bian.offsetLeft,
Top = bian.offsetTop;
// 总和 变化量+元素left top值
var left = Left + bian.Le,
top = Top + bian.To;
// 判断边界 到了边界就弹
if(top >= maxH || top
top = Math.min(top,maxH);
top = Math.max(top,0);
bian.To = -bian.To;
}
if(left >= maxW || left
left = Math.min(left.maxW);
left = Math.max(left,0);
bian.Le = -bian.Le;
}
// 赋值
}
}
}
// 函数封装元素属性背影;
function yan(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "-webkit-linear-gradient(rgb(255,255,255),rgb("+r+", "+g+", "+b+"))";
}
领取专属 10元无门槛券
私享最新 技术干货