关于弹幕效果的实现
Posted 麦兜家园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于弹幕效果的实现相关的知识，希望对你有一定的参考价值。
视频在网络上是必不可少的，那么随之而来的就是大家的评论啊或者是弹幕效果都是现在常见的，所以今天写一个弹幕效果，来看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;} .content{position:relative;height:auto;width:100%;} .bottomcon{position:absolute;bottom:0;left:0;width:100%;padding:20px 0;background-color: #ccc;text-align: center} .txt{border:1px solid #ff6b0e;height:35px;line-height:35px;border-radius:5px;background:none;outline: 0;padding:0 10px;} .btn{padding:8px 20px;cursor:pointer;border-radius:5px;background: #ff6b0e;border:none;color:#fff;font-size:16px;outline: 0;} span{position:absolute;} </style> </head> <body> <div class="content"> <div class="bottomcon"> <label>弹幕：</label> <input type="text" class="txt" id="txt"/> <button class="btn">发布</button> </div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ var colors=["#FF6B0E","#FF413E","#ff0ecb","#760eff","#0e90ff","#0eff90","#97ff0e","#ffd60e"]; $(".content").css("height",$(window).height()+"px");//获取屏幕高度，是为了让bottomcon处于最下方 $(".btn").click(function(){ var randomColor=parseInt(Math.random()*colors.length);//设置随机颜色 var randomYh=parseInt(Math.random()*500);//设置随机高度 $("<span></span>").text($("#txt").val()).css("color",colors[randomColor]).css("left","1300px").css("top",randomYh).animate({left:-500},10000,"linear",function(){ $(this).remove(); }) .appendTo(".content");//添加到content里 $("#txt").val("");//随即清空input内容 }); //开启键盘keyup触发事件 $("#txt").keyup(function(e){ if(e.keyCode==13){ $(".btn").click() } }) }) </script> </html>
以上效果实现的过程中涉及到了先创建span，然后向span里设置内容也就是$("#txt").val()，接下来就是给这些个内容设置了一系列的css值，然后给animate动画让其出来，移动过程中到左边屏幕让其remove掉，最后将其添加到content里即可，剩下的就是一些修饰等等，大概思路就是如此。这个案例也充分体现了jquary的链式操作的强大之处，也就是说通过这一句代码就实现了较为复杂的效果。好了，看下效果：
只能截张图片看看了，大概效果就是如此，有兴趣的可以将代码拷贝一下实施看哦！当然要注意引用jquary的路径~
以上是关于关于弹幕效果的实现的主要内容，如果未能解决你的问题，请参考以下文章