移动式弹窗广告
function boxMove(ele) {
var top = parseInt(getStyles(ele).top);
var left = parseInt(getStyles(ele).left);
var offsetHeight = ele.offsetHeight;
var offsetWidth = ele.offsetWidth;
var clientHeight = document.documentElement.clientHeight;
var clientWidth = document.documentElement.clientWidth;
var y = clientHeight - offsetHeight;
var x = clientWidth - offsetWidth;
if (top >= y) {
if (ele.speedX > 0) {
ele.speedX *= -1;
}
}
if (top < 0) {
ele.speedX *= -1;
}
top += ele.speedX;
if (left >= x) {
if (ele.speedY > 0) {
ele.speedY *= -1;
}
}
if (left < 0) {
ele.speedY *= -1;
}
left += ele.speedY;
ele.style.top = top + 'px';
ele.style.left = left + 'px';
}
var colorStrArr=["1","2","3","4","5","6","7","8","9","10","A","B","C","D","E","F"];
const BALL_NUMBER=20;
const MIN_BALL_WIDTH=140;
const MAX_BALL_WIDTH=200;
const START_DRESS=0;
const MIN_SPEED=3;
const MAX_SPEED=12;
const COLOR_NUMBER=6;
creatBall();
function creatBall() {
for (let i = 0; i < BALL_NUMBER; i++) {
var wh = random(MIN_BALL_WIDTH, MAX_BALL_WIDTH);
var ball = createDiv(START_DRESS, START_DRESS, wh, wh);
ball.speedX = random(MIN_SPEED,MAX_SPEED);
ball.speedY = random(MIN_SPEED,MAX_SPEED);
var bgColor='';
for (let j = 0; j < COLOR_NUMBER; j++) {
bgColor+=colorStrArr[random(0,colorStrArr.length)];
}
ball.style.backgroundColor="#"+bgColor;
document.body.appendChild(ball);
setInterval(boxMove, INTERVAL, ball);
}
}
注意:1.这里boxMove方法中的getStyles(ele)方法需要自己写一个得到元素的最终样式的方法就可以了,注意兼容性。
2.creatBall方法中的random方法需要写一个求任意范围的随机数方法,还有一个createDiv也是需要自己写一个在页面任意位置创建任意宽高的方法!