In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-01 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
本篇内容主要讲解"怎么用jQuery代码实现弹幕效果",感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习"怎么用jQuery代码实现弹幕效果"吧!
先来看看运行效果:
下面将整个代码显示出来:
www.jb51.net弹幕 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; }弹幕技术 X 发表言论 $("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(){ $('div.mask').fadeOut(500); }); $(".danmu").click(function(){ $('div.mask').fadeIn(500); });到此,相信大家对"怎么用jQuery代码实现弹幕效果"有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.