JS阶段ES5

最新推荐文章于 2024-07-22 15:13:59 发布

码豆前端工程师

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量172

点赞数 1

本文链接：https://blog.csdn.net/WYF857446152/article/details/124595584

版权

今天带大家实现一种有趣的酒吧效果，很简单。先看一下效果图：

效果图都是动态，背景灯光闪烁，像极了在现场，小球会旋转并进行色相旋转。接下来就是教大家如何写出这种效果：

1.首先找到一张动态图，灯光闪烁的动态图作为我们body的背景图片

2.放入多个个div border-radius：50%。让盒子变为圆形，并加上绝对定位。

3.接下来就进入到JS环节，首先要做的就是将所有盒子获取，通过var 声明变量 dBalls=document.querySelectorAll（“.ball”）；这里.ball是div的类名。具体代码如下：

在BOM事件中通过window.innerWidth可以获取到盒子的宽度，但是并不能将其修改。获取所有盒子给每个盒子添加属性，所以就要遍历数组，使用for循环。for（var i=0；i<dBalls.length;i++）{
var ball =dBalls[i];}然后在函数里继续添加属性因为window。innerWidth不能改变宽度，所以通过ball.style方式进行修改。

4.需要调用函数写一个随机数的函数。方便ball进行调用，使ball的宽度高度都是随机生成的。具体代码如图：

函数function rand(min,max){return Math.round(Math.random*(max-min)+10)}这个函数就是随机数的函数在上面遍历数组的时候进行调用即可。

5.让小球动起来，不规则的动起来。那就需要定时器setInterval来使用。

6.让小球到边缘处返回给他设置浏览器最大宽度和高度即可，代码如上。

最后这个动态简单的酒吧效果就实现了。在这里把代码全部附上：

@keyframes roll {

from {

filter: hue-rotate(0);

transform: rotate(0);

}

to {

filter: hue-rotate(360deg);

transform: rotate(360deg);

}

* {

margin: 0;

padding: 0;

}

body {

background-image: url(../day02/img/201301182347367794.gif);

background-size: cover;

}

.wrap {

width: 100vw;

height: 100vh;

position: relative;

overflow: hidden;

/* background-color: #111; */

}

.ball {

width: 150px;

height: 150px;

/* background-color: pink; */

border-radius: 50%;

position: absolute;

top: 130px;

left: 0;

/* background-image: url(../day02/img/851949762FAB82EFBC57E7EDAFB0B948.jpg); */

background-size: cover;

animation: roll .2s linear infinite;

}

.ball div {

width: 96%;

height: 96%;

background-color: rgba(255, 255, 255, .3);

border-radius: 50%;

filter: blur(10px);

}

.people {

width: 100%;

height: 400px;

background-image: url(../day02/img/de2a66d8d66146aa8794520ebe6e9917.gif);

background-size: cover;

background-position: center center;

z-index: 1;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

// s=v*t

var dBalls = document.querySelectorAll('.ball');

var timer = null;

//获取屏幕的宽度和高度

var sw = window.innerWidth;

var sh = window.innerHeight;

// 自执行函数

(function() {

for (var i = 0; i < dBalls.length; i++) {

var ball = dBalls[i];

//为小球添加速度并重新设置起点

ball.vx = Math.random() > 0.5 ? rand(1, 3) : -rand(1, 3);

ball.vy = Math.random() > 0.5 ? rand(1, 3) : -rand(1, 3);

ball.style.left = rand(0, sw - ball.offsetWidth) + 'px';

ball.style.top = rand(0, sh - ball.offsetHeight) + 'px';

//随即大小

var w = rand(60, 200);

ball.style.width = w + 'px';

ball.style.height = w + 'px';

ball.style.backgroundColor = randColor();

//颜色

}

})()

function move(dBall) {

var l = dBall.offsetLeft + dBall.vx;

var t = dBall.offsetTop + dBall.vy;

if (l > sw - dBall.offsetWidth) {

l = sw - dBall.offsetWidth;

dBall.vx = -dBall.vx;

} else if (l < 0) {

l = 0;

dBall.vx = -dBall.vx;

}

if (t > sh - dBall.offsetHeight) {

t = sh - dBall.offsetHeight;

dBall.vy = -dBall.vy;

} else if (t < 0) {

t = 0;

dBall.vy = -dBall.vy;

}

dBall.style.left = l + 'px';

dBall.style.top = t + 'px';

}

//开启定时器

timer = setInterval(function() {

//每一次时间间隔让dBall进行一次单位行动

// dBall的新位置=dBall的当前位置+速度

//dBall 距离定位父级左侧偏移量offsetLeft 只读取

// offsetTop 距离定位父级顶部的偏移量只读取

//边界处理

for (var i = 0; i < dBalls.length; i++) {

var ball = dBalls[i]

move(ball);

}

}, 30)

//随机函数

function rand(min, max) {

return Math.round(Math.random() * (max - min) + min)

}

//随机颜色

function randColor() {

return `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;

}

</script>

码豆前端工程师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS阶段ES5

用JS简单实现动态效果
复制链接

扫一扫

JS阶段ES5

“相关推荐”对你有帮助么？