jQuery实现的弹幕效果完整实例
2017-09-06 11:33
701 查看
看视频的时候老是会出现一些弹幕,对于这个看着很高大上的特效,其实也不难实现。
先来看看运行效果:
下面将整个代码显示出来:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net弹幕</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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- jQuery实现的自适应焦点图效果完整实例
- jQuery实现的省市县三级联动菜单效果完整实例
- jQuery实现内容定时切换效果完整实例
- jQuery实现页面顶部显示的进度条效果完整实例
- jQuery实现动态表单验证时文本框抖动效果完整实例
- jQuery实现的表头固定效果实例【附完整demo源码下载】
- jQuery实现图片上传预览效果功能完整实例【测试可用】
- jQuery实现的选择商品飞入文本框动画效果完整实例
- jquery实现的回旋滚动效果完整实例【附demo源码下载】
- jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
- jQuery实现仿美橙互联两级导航菜单效果完整实例
- jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
- jQuery实现页面顶部显示的进度条效果完整实例
- jQuery实现的placeholder效果完整实例
- jQuery实现仿美橙互联两级导航菜单效果完整实例
- jQuery实现动态表单验证时文本框抖动效果完整实例
- jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
- jquery实现的一个简单进度条效果实例
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- jquery+ajax+text文本框实现智能提示完整实例