富贵资源网 Design By www.hznty.com

用jquery写的一个弹幕,供大家参考,具体内容如下

效果图:

基于jquery实现弹幕效果

源码:

<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="/UploadFiles/2021-04-02/1429411761ed3dc100c73251.mp4">

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com