简单实现JavaScript弹幕效果

前端之家收集整理的这篇文章主要介绍了简单实现JavaScript弹幕效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰。今天我们来写一个简单的弹幕。简单到什么程度呢?看下效果

由图可以看出,我们的呆毛html结构确实是非常简单啦。 就是由一个div、一个input框另加一个button组成。

Box" class="Box">

先po上js代码

Box').appendChild(span); $('txt').value = ""; } setInterval(move,200); function move() { var spanArray = $('Box').children; for (var i = 0; i < spanArray.length; i++) { spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px'; } }

原理简单说下:

第一步

,我们要拿到input框里面的内容,var word = $('txt').value;

第二步

,我们就要把这个内容想方设法地塞到要滚动显示的div里面去了,原则有三:①颜色随机②高度随机③与左边框的距离实时变化;

第三步

,把这个内容追加到div里 $('Box').appendChild(span);

由上述步骤原理可以看出,第二步是最关键的一步,

实现第一个原则:

小扩展:

RGB(R,G,B); R: 红色值。正整数 | 百分数 G: 绿色值。正整数 | 百分数 B: 蓝色值。正整数 | 百分数 这样就应该是很容易理解了。

实现第二个原则:

实现第三个原则:

Box').children; for (var i = 0; i < spanArray.length; i++) { spanArray[i].style.left = parseInt(spanArray[i].style.left) - spanArray[i].speed + 'px'; } }

就是利用了定时器的原理,让left的值实时变化。

讲到这里,就应该很清晰明了了吧。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章