弹幕效果

Posted IT-忐忑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了弹幕效果相关的知识,希望对你有一定的参考价值。

  有时我们在一些平台上看到一些好玩的电影或节日时非常喜欢发弹幕,那今天就来让我们自己在网页中做一个简单的弹幕效果

  我们先要在html部分做出能接收到发表内容的框,发表的按钮并且换上自己喜欢的样式及内容。

  <input type="text"   id="txt" />

  <input type="button"  id="btn" value="发表" />

  之后就是js部分了,我们先给按钮添加点击事件,并且因为弹幕的颜色和大小位置都是不一样的所以我们还要创建一个用来随机的函数;

  在按钮事件中我们先要判断一下内容是否为空,空则不发送,并在最后清空一下内容,防止大量的数据刷新后出现各种问题;

  如果内容不为空就开始创建一个新的元素标签来让我们可以设置上;

  首先添加上所要发表的字体并设置上随机的字体颜色,并且让发表的内容位置进行随机,字体随机大小,后添加到网页中,并添加上间隔器,让其移动速度进行随机。

  btn.onclick = function(){
    if(txt.value == ‘‘){
      alert(‘请输入内容‘);
    }else{
    var p = document.createElement(‘p‘);
    p.innerHTML = txt.value;
    p.style.color = ‘rgb(‘+ranFun(255,0)+‘,‘+ranFun(255,0)+‘,‘+ranFun(255,0)+‘)‘;
    p.style.top = ranFun(50,500)+‘px‘;
    p.style.fontSize = ranFun(10,50)+‘px‘;
    document.body.appendChild(p);
    setInterval(function(){
      p.style.left = p.offsetLeft+5+‘px‘;
    },ranFun(30,100))
    txt.value = ‘‘;
    }
  }
  function ranFun(max,min){
    return parseInt(Math.random()*(max-min+1)+min);
  }

  因为我们是设置的id所以我们可以直接使用

 

以上是关于弹幕效果的主要内容,如果未能解决你的问题,请参考以下文章

50行代码搞定弹幕效果

前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

又一枚精彩的弹幕效果jQuery实现

android 弹幕评论效果

Android 教你亲手打造酷炫的弹幕效果