这篇文章主要介绍了jquery实现的弹幕效果,结合完整实例形式分析了jquery通过结合时间函数控制输入文字与样式的渐变实现弹幕效果,对于jquery感兴趣的朋友可以参考下本篇文章
看视频的时候老是会出现一些弹幕，对于这个看着很高大上的特效，其实也不难实现。
下面将整个代码显示出来：
nbsp;html>www.php.cn弹幕 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; } p.mask{ position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.8); opacity:0.5; top:0px; left:0px; } p.bottom{ width:100%; height:77px; background:linear-gradient(#ccc,#4a4a4a); position:fixed; bottom:0px; left:0px; text-align:center; line-height:77px; } p.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; } p.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'; } p.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; } p.text{ color:#fff; position:fixed; right:0px; font-size:20px; white-space: nowrap; } $("a.send").click(function(){ var val=$(".content").val(); var content=$(""+val+""); 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(){ $('p.mask').fadeOut(500); }); $(".danmu").click(function(){ $('p.mask').fadeIn(500); });
登录后复制
以上就是本篇文章的所有内容，希望本篇文章可以给大家提供到帮助！！
相关推荐：
jQuery实现的文字逐行向上间歇滚动效果示例
jQuery使用bind函数实现绑定多个事件
jQuery自动或手动图片切换实现方法分享
以上就是jQuery实现的弹幕效果完整实例的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789006.html
