js全屏跑马灯（原创）

Html

Css

 * {
	padding:0;
	margin:0;
}
.box {
	width:50px;
	height:50px;
	/*   background:skyblue;
	*/
      position:fixed;
	left:0;
	top:0;
	border-radius:50%;
	/*  background:-webkit-radial-gradient(#f00,#00f) !important;
	*/
}

var maxLeft;
var maxTop;

// window.onresize = function () {
//   maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
//   maxTop = document.documentElement.clientHeight - oBox.offsetHeight;
// }

// run(oBox);
// run(oBox1, 5);

// setInterval(() => create(), 1000);

create(100);

function create(width = 50) {
    var oDiv = document.createElement('div');
    oDiv.className = 'box';
    oDiv.style.width = width + 'px';
    oDiv.style.height = width + 'px';
    oDiv.style.background = randomRGB();
    document.body.appendChild(oDiv);
    run(oDiv);
}

function run(ele, speed = 10) {
    // var speed = 10;

var speedX = speed;
    var speedY = 0;

setInterval(function() {

maxLeft = document.documentElement.clientWidth - ele.offsetWidth;
        maxTop = document.documentElement.clientHeight - ele.offsetHeight;

var left = ele.offsetLeft;
        var top = ele.offsetTop;

left += speedX;
        top += speedY;

if (left > maxLeft) {
            left = maxLeft;
            speedX = 0;
            speedY = speed;
        }

if (top > maxTop) {
            top = maxTop;
            speedY = 0;
            speedX = -speed;
        }

if (left < 0) {
            left = 0;
            speedX = 0;
            speedY = -speed;
        }

if (top < 0) {
            top = 0;
            speedY = 0;
            speedX = speed;
        }

ele.style.left = left + 'px';
        ele.style.top = top + 'px';

}, 10);
}

function randomRGB() {
    return `rgb(${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)}, ${Math.round(Math.random() * 255)})`
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js全屏跑马灯（原创）

代码描述：小球全屏跑

更新时间：2020-06-24 10:21:10

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

?

相关代码

js全屏跑马灯（原创）

最新