jQuery实现的弹幕效果完整实例

2019-11-19 15:31:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现的弹幕效果。分享给大家供大家参考，具体如下：

看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。

先来看看运行效果：

下面将整个代码显示出来：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>www.VeVB.COm弹幕</title><style type="text/css">  html,body{    background:#efefef;    height:100%;  }  .danmu{    width: 100px;    height:30px;    line-height: 28px;    background: green;    border-radius: 5px;    border:1px solid #fff;    color: #fff;    outline: none;  }  div.mask{    position:fixed;    width:100%;    height:100%;    background:rgba(0,0,0,0.8);    opacity:0.5;    top:0px;    left:0px;  }  div.bottom{    width:100%;    height:77px;    background:linear-gradient(#ccc,#4a4a4a);    position:fixed;    bottom:0px;    left:0px;    text-align:center;    line-height:77px;  }  div.bottom input.content{    width:50%;    min-width: 200px;    height:37px;    border:none;    border-radius:10px 0px 0px 10px;    font-size:16px;    padding:0 10px;    outline:none;  }  div.bottom a.send{    background-color:green;    color:#fff;    display:inline-block;    width:100px;    height:38px;    line-height:37px;    text-align:center;    position:relative;    left:-10px;    top:2px;    border-radius:0px 10px 10px 0px;    text-decoration:none;    font-family:'Microsoft Yahei';  }  div.mask a.button{    width:30px;    height:30px;    border-radius:50%;    background-color:green;    color:#fff;    position:fixed;    top:20px;    right:20px;    text-align:center;    line-height:30px;    font-size:20px;    font-family:'Microsoft Yahei';    border:1px solid #fff;    text-decoration:none;    cursor:pointer;  }  div.text{    color:#fff;    position:fixed;    right:0px;    font-size:20px;    white-space: nowrap;  }</style></head><body><button class="danmu">弹幕技术</button>  <div class="mask">    <a href="#" rel="external nofollow" rel="external nofollow" class="button">X</a>  </div>  <!-- 底部发言框前端 -->  <div class="bottom">    <input class="content"></input>    <a href="#" rel="external nofollow" rel="external nofollow" class="send">发表言论</a>  </div>  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  <script>   $("a.send").click(function(){  var val=$(".content").val();  var content=$("<div class='text'>"+val+"</div>");  var top=Math.random()*$(document.body).height()+40+"px";  content.css("top",top);  $(".mask").append(content);  content.animate({right:$(document.body).width()+100},8000,function(){  $(this).remove();  })  });  $('.button').click(function(){      $('div.mask').fadeOut(500);    });    $(".danmu").click(function(){     $('div.mask').fadeIn(500);  });</script></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：vue 2.0项目中如何引入element-ui详解

下一篇：JavaScrip数组删除特定元素的几种方法总结