jquery实现弹幕效果

最新推荐文章于 2024-04-16 09:35:27 发布
最新推荐文章于 2024-04-16 09:35:27 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： js html
js 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏
用js写的一个弹幕

效果图：

源码：

<pre name="code" class="javascript"><!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--  
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />  
    <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />  
    -->
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>JQuery弹幕</title>
		<link href="" rel="stylesheet" />
		
		</script>
		<style type="text/css">
			body {
				overflow: hidden;
			}
			
			.content {
				overflow: hidden;
			}
			
			.ctxt {
				background: burlywood;
				width: 100%;
				overflow: hidden;
				margin: 0 auto;
				z-index: 9999;
			}
			
			.ctxt p {
				
				left: 95%;
				margin: 0;
				padding: 0;
				z-index: 99;
				overflow: hidden;
			}
			
			#msg{
				height: 24px;
				width: 200px;
			}
			
			#barrage {
				color: gainsboro;
				border: 1px solid aqua;
				font-size: 12px;
				border-radius: 10px;
				float: right;
			}
			
			#style {
				margin-top: 10px;
			}
			
			#publish {
				display: none;
			}
			
			video {
			
				width: 100%;
				overflow: hidden;
				z-index: -99999;
			}
			
			#danmu {
				position: absolute;
				overflow: hidden;
				font-size:20px;
			}
		</style>
	</head>

	<body>
		<div class="content">

			<div id="" class="ctxt">
				<video id="vodio" autoplay="autoplay">
					<source src="video/1429411761ed3dc100c73251.mp4" type="video/mp4">
					</source>

				</video>
			</div>

			<div id="style">
				<button id="barrage"> <font style="color: white;">开始弹幕</font></button>
				<div id="publish">
					<form method="post" align="center">
						<input type="text" id="msg" />
						<button type="button" id="submitBut">发布</button>
					</form>
				</div>

			</div>
		</div>
			<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#barrage").click(function() {
					$("#publish").toggle();
				});
					
				$("#submitBut").click(function() {

					var msgtxt = $("#msg").val();
				
					var colortxt = getReandomColor();
					var topPos = generateMixed(3);
					
					if(topPos > 500) {
						topPos = 30;
					}
					var newtxt = '<p id="danmu" style="top:' + topPos + 'px; color:' + colortxt + '">' + $("#msg").val() + '</p>';
					$(".ctxt").prepend(newtxt);
					var addTextW = $(".ctxt").find("p").width();
					$(".ctxt p").animate({
						left: '-' + addTextW + 20 + "px"
					}, 30000, function() {
						$(this).hide();
					});
					$("#msg").val(" ");	
				});

			});
			//随机获取颜色值  
			function getReandomColor() {
				return '#' + (function(h) {
					return new Array(7 - h.length).join("0") + h
				})((Math.random() * 0x1000000 << 0).toString(16))
			}

			//生成随机数据。n表示位数    
			var jschars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

			function generateMixed(n) {
				var res = "";
				for(var i = 0; i < n; i++) {
					var id = Math.ceil(Math.random() * 9);
					res += jschars[id];
				}
				return res;
			}
		</script>

	</body>

</html>

 

 

 
 
 

 


  赶快试试吧 


                

        

        

    




    

      

        

            

              
                
                  WllZmz
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Html —— 表白弹幕 特效（效果+代码）

				
			

			

				

					追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
				

				

					02-07
					
					8673
					
				

			

		

		

			
				
目录效果代码说明
效果




鉴于图片大小，所以分开来显示的部分效果。字体颜色等都可以继续更改。
代码
表白.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹幕表白墙特效</title>
    <link rel="stylesheet" href="css/demo.css"/>
</head&

			
		

	



                

              
                



	

		

			

				
					
基于jQuery实现弹幕效果

				
			

			

				

					米拉
				

				

					04-23
					
					2073
					
				

			

		

		

			
				
效果如下：



HTML：


<div class="dmbg">
<div class="dmHt">
<img src="images/txt01.png">
<span>已有<b>257864</b>人在此寄托了思念</span>
</div>
<div class="dmShow">
<!--<div>祝家乡越来越繁荣昌盛，人们的生活也越来越富裕。</div>

			
		

	



                


  
              

                


	

		

			

				
					
HTML+CSS+JavaScript制作弹幕效果

				
			

			

				

					qq_44715376的博客
				

				

					05-29
					
					2796
					
				

			

		

		

			
				
全屏弹幕，盒子弹幕，视频弹幕

			
		

	





	

		

			

				
					
推荐一款创新弹幕库：jQuery.danmu.js

					
最新发布

				
			

			

				

					gitblog_00050的博客
				

				

					04-16
					
					443
					
				

			

		

		

			
				
推荐一款创新弹幕库：jQuery.danmu.js
项目地址:https://gitcode.com/chiruom/jquery.danmu.js
项目简介
jQuery.danmu.js 是一个基于 jQuery 开发的轻量级弹幕插件，它能够帮助开发者轻松地在网页上实现类似视频网站的实时互动弹幕效果。该项目由 Chiruom 创建并维护，旨在提供一个简单、可定制且高效的弹幕解决方案。
技术分析...

			
		

	



		

			
		



	

		

			

				
					
jQuery如何实现弹幕效果

				
			

			

				

					weixin_45324878的博客
				

				

					12-22
					
					1398
					
				

			

		

		

			
				
用jQuery实现弹幕效果
jQuery弹幕效果
弹幕在日常网络中也比较常见，弹幕的种类也是各式各样的，今天也就简单的做一个普通的弹幕效果。
首选认识一下marquee
marquee
HTML marquee 元素（） 用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。
属性
behavior:设置文本在 marquee 元素内如何滚动。可选值有 scroll，slide 和 alternate。 如果未指定值，默认值为 scroll。
bgcolor:通过颜色名称或十六进制值设

			
		

	





	

		

			

				
					
HTML如何实现滚动的弹幕效果（每天一个项目小知识）

				
			

			

				

					lslslsls77的博客
				

				

					06-28
					
					3297
					
				

			

		

		

			
				
html弹幕效果

			
		

	





	

		

			

				
					
Jquery实现弹幕效果

					
热门推荐

				
			

			

				

					一行代码
				

				

					05-22
					
					1万+
					
				

			

		

		

			
				
话不多说吧，直接看效果吧： 


主要思路

其实弹幕的主要思路很简单，就是将div从右向左移动，直到完全移除屏幕之后，将当前div从body中移除，这里我采用了面向对象的思想来处理，具体js代码如下：



JS



/**
 * 弹幕
 */
$(function () {

    function BarrageManager (options) {

        this.opts...

			
		

	





	

		

			

				
					
jQuery实现弹幕效果

				
			

			

				

					10-20
				

			

		

		

			
				
本文主要分享了jQuery实现弹幕效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

			
		

	





	

		

			

				
					
基于jquery实现弹幕效果

				
			

			

				

					10-21
				

			

		

		

			
				
主要为大家详细介绍了基于jquery实现弹幕效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
jQuery实现简单弹幕效果

				
			

			

				

					10-15
				

			

		

		

			
				
主要为大家详细介绍了jQuery实现简单弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
jQuery实现动态弹幕效果

				
			

			

				

					01-08
				

			

		

		

			
				
jQuery实现的动态的网络直播弹幕效果,可以发弹幕,并滚动播放.

			
		

	





	

		

			

				
					
jquery实现视频播放时弹幕效果

				
			

			

				

					02-29
				

			

		

		

			
				
jquery实现视频播放时弹幕效果，动态添加输入弹幕，实时显示出来

			
		

	





	

		

			

				
					
jquery实现直播弹幕效果

				
			

			

				

					10-15
				

			

		

		

			
				
主要为大家详细介绍了jquery实现直播弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
Jquery——弹幕效果

				
			

			

				

					Zjaun的博客
				

				

					02-13
					
					615
					
				

			

		

		

			
				
css样式
&lt;style type="text/css"&gt;
    html,
    body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-family: "微软雅黑";
      font-size: 62.5%;
    }

    .bo...

			
		

	





	

		

			

				
					
jQuery实现弹幕效果（鼠标单击和键盘回车键）

				
			

			

				

					qq_56715703的博客
				

				

					11-21
					
					390
					
				

			

		

		

			
				
jQuery实现弹幕效果（鼠标单击和键盘回车键）

			
		

	





	

		

			

				
					
用HTML+CSS+JS实现一个简单的弹幕滚动留言板

				
			

			

				

					猿小白的博客
				

				

					10-28
					
					825
					
				

			

		

		

			
				
【代码】用HTML+CSS+JS实现一个弹幕滚动留言板。

			
		

	





	

		

			

				
					
HTML基础-----弹幕

				
			

			

				

					2402_82653050的博客
				

				

					01-25
					
					403
					
				

			

		

		

			
				
p标签可更换为其他标签 如img标签等。运行结果如下（弹幕不断滚动）

			
		

	





	

		

			

				
					
marquee标签实现滚动

				
			

			

				

					分享我的点点滴滴，在成长路上与你同行！
				

				

					04-01
					
					927
					
				

			

		

		

			
				
marquee标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果，该标签是个容器标签。

         一、marquee标签的几个重要属性：

         1.direction：滚动方向(包括4个值：up、down、left、right)

            说明：u

			
		

	





	

		

			

				
					
jquery实现div弹出效果

				
			

			

				

					07-08
				

			

		

		

			
				
使用jQuery实现DIV弹出效果可以通过以下步骤进行：

1. HTML结构：首先，在HTML中创建一个DIV元素，用于弹出内容的容器。例如：

```html
<div id="popup" style="display: none;">
  <h2>弹出内容</h2>
  <p>这是一个弹出窗口的内容。</p>
  <button id="closeBtn">关闭</button>
</div>
```

2. CSS样式：为弹出容器DIV添加样式，使其以弹出的形式显示在页面上。例如：

```css
#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  z-index: 9999;
}
```

3. jQuery代码：使用jQuery来实现弹出效果。例如：

```javascript
$(document).ready(function() {
  // 点击触发弹出
  $("#openBtn").click(function() {
    $("#popup").fadeIn();
  });

  // 点击关闭按钮或弹出外部区域时关闭弹出
  $("#closeBtn, #popup").click(function() {
    $("#popup").fadeOut();
  });

  // 阻止点击弹出内容区域时冒泡关闭
  $("#popup").click(function(event) {
    event.stopPropagation();
  });
});
```

在上述代码中，首先使用`$("#openBtn")`来选择一个按钮元素，当点击该按钮时，使用`fadeIn()`方法来使弹出容器淡入显示。使用`$("#closeBtn, #popup")`来选择关闭按钮和弹出容器本身，当点击它们时，使用`fadeOut()`方法来使弹出容器淡出隐藏。

同时，还添加了一个事件处理程序来阻止点击弹出内容区域时冒泡关闭，以确保在弹出内容区域内的点击操作不会关闭弹出容器。

通过以上步骤，你可以使用jQuery实现一个简单的DIV弹出效果。记得在页面中引入jQuery库。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值