首页>>音乐/视频>>HTML5视频播放器随页面滚动固定页面右下角(2021-05-07)

HTML5视频播放器随页面滚动固定页面右下角

HTML5视频播放器随页面滚动固定页面右下角
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="videoBox" class="box">  
  2.                 <video width="400" controls>  
  3.                     <source src="video/2.mp4" type="video/mp4">   
  4.                     你的浏览器不支持 HTML5 video  
  5.                 </video>  
  6.             </div>  

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );  
  3.   
  4.         $(window).scroll(function(){    
  5.   
  6.             if ( $(window).scrollTop() > ha + 500 ) {   
  7.             $('#videoBox').css('bottom','0');   
  8.             } else if ( $(window).scrollTop() < ha + 200) {    
  9.             $('#videoBox').removeClass('out').addClass('in');       
  10.             } else {         
  11.             $('#videoBox').removeClass('in').addClass('out');     
  12.             $('#videoBox').css('bottom','-500px');               
  13.           };    
  14.   
  15.         });  
  16.     </script>  

 


原文地址:http://www.freejs.net/article_yingyueshipin_902.html