preface

This requirement is similar to the question. Basically, the comment data of the article will appear in the form of bullet screen above the first picture of the article. At that time when doing this demand, spent a lot of energy, stepped on a lot of pits, now the bullet screen implementation ideas to write out, if you like it can point bozan/attention, support, I hope you can have a harvest after reading this article.

Personal blog: obkoro1.com

Effect:

Implementation principle:

The principle of realizing the bullet screen is not too complicated, it takes some time and can be done.

  1. Get barrage data.
  2. Set the barrage to four channels, each channel can appear a maximum of two barrage.
  3. usesetIntervalDynamic settingdomtheleftProperties.
  4. Using the domoffsetWidthAnd the width of the screen to determine if the element scrolls beyond the screen, then remove the DOM.

Implementation steps:

1. Take a look firsthtmlThe structure of the.

<div class="detailImg"> <img src="url"/> <div id="barrageDiv"> <div id="barrageLayer1"></div> <div id="barrageLayer2"></div> <div id="barrageLayer3"></div> <div id="barrageLayer4"></div> </div> </div> <! --detailImg set relative, barrageDiv set Z-index on top of picture, and position of picture --> <! --barrageLayer1~4 sets a top attribute to make the four divs on their level, forming four channels -- >Copy the code

The key points about the CSS styles here are explained above, just pay attention to how the above channels are formed. The specific style will not be posted out, according to their needs to it.

2. Obtain the data required by the barrage.

To achieve the effect of the barrage must have data, here is the request.

When retrieving data, consider the amount of data. It is not possible to obtain all of the data at once. You can obtain a portion of the data at once, and when the data is about to be loaded, request the data again.

So we’re going to keep track of whether or not the request is complete, and if the request is complete, we can stop sending the data and just use all the data that we got before.

3. Execute the function of the barrage.

After the data of the barrage is obtained, the function of the barrage operation will be executed. Since I set a lot of data states when WRITING the function of the barrage, I will briefly talk about the implementation ideas and key codes here.

Functions of danmu function include:

  1. Periodically obtain data (determine whether data is loaded)

  2. Time launch the barrage (determine whether the channel is idle), pass in the content needed by the barrage, user profile picture, etc.

  3. Create DOM content, generate a bullet-screen div according to the passing parameter, set the style attribute, and insert the div into the corresponding DOM according to the subscript controlling the bullet-screen data array.

  4. The timer is used to move DOM. Here, the movement speed of bullets is defined according to the content length.

  5. Determine whether the four channels are idle during the process of moving the danmu. When the DOM moves off the screen, move the DOM and clear the timer.

    Function Barrage (){// The first part checks whether the data load is complete. // If the data is not loaded, run the interface to request data again, the number of pages can be array/the number of pages per request +1 // when the data is loaded, clear the timer. ClearInterval (this.data); clearInterval(this.data); . / / regularly launch _this barrageStatus. DivStatus. Intervalid = setInterval (selfTime, 1100); Function selfTime () {if (_this dataNum > =. _this barrageStatus. Data. The length) {/ / when dataNum is greater than or equal to the number of array, barrage from scratch again. _this dataNum = 0;  If (divStatus.div1===false){divStatus.div1=true; _this.dataNum++; return barrageOut(_this.barrageStatus.data[_this.dataNum-1].content,_this.barrageStatus.data[_this.dataNum-1].commentator.headI mgUrl,_this.dataNum); }}; Function barrageOut(text,imgUrl,num) {//text: If (num%4==1){// Create a node based on the subscript of the array barrageLayer=document.getElementById('barrageLayer1'); } let divBox = document.createElement('div'); let divBoxImg=document.createElement('span'); let divBoxText=document.createElement('span'); divBox.setAttribute('class','barrageDivClass'); divBoxText.innerHTML=text; divBox.appendChild(divBoxImg); divBoxImg.setAttribute('class','barrageDivClass_img'); divBoxImg.style.backgroundImage=`url(${imgUrl})`; divBox.appendChild(divBoxText); divBox.style.left=document.body.clientWidth+2000+'px'; // Initialize the left position, initially on the right side of the screen barragelayer.appendChild (divBox); // Let time,l=0; Time = setInterval(function(){if(text.length<15){// }else{ l=l-2; } / / by reducing the left property to move this div moving from right to left divBox. Style. Left = document. Body. ClientWidth + l + 'px'; Let delDiv=()=>{if(num%4==1){if(num%4==1) barrageLayer=document.getElementById('barrageLayer1'); If (barrageLayer..childnodes. Length < 2) {/ / number of barrage, if less than 2, set to false, the timer can continue to launch barrage divStatus. Div1 = false; }else{ divStatus.div1=true; }}}} the if (< = l (0 - divBox. OffsetWidth - 120)) {if (_this. BarrageStatus. DivStatus. Switch = = true) {/ / barrage switch delDiv (); If (< = l (0 - divBox. OffsetWidth - document. Body. ClientWidth)) {/ / shrinking left property, Barragelayer.removechild (divBox) when it is smaller than the width of the content and rolled 120; // Remove dom clearInterval(time); }}else{clearInterval(time); // Clear the div timer}},20)}}Copy the code

conclusion

This bullet screen requirement, I was implemented as above, looking back at the implementation, found that there are still many places can be optimized and split, if you have a better implementation ideas and any errors in this article, welcome to leave a message in the comments section below.

I hope the friends can click like/follow, your support is the biggest encouragement to me.

Finally: if need to reprint, please put the original link and signature. Code word is not easy, thank you for your support! I write articles in line with the mentality of exchange records, write bad place, do not quarrel, but welcome to give directions.

Personal blog and Nuggets personal homepage

Follow my subscription number to learn and grow together.

The above 2018.4.29

References:

Pure JS to achieve the effect of bullets