视频播放窗口网页下拉时自动缩小并在右下显示小窗口播放

杨海威

网页滚屏下拉悬浮小窗口视频播放js特效代码，网页视频播放，当网页下拉时视频自动缩小并在右下显示小窗口播放代码。
添加css

1. .player { width: 1240px; margin: 0 auto; background-color: #2B2B2B; height: 600px; }
   
2. .player .rtab { width: 402px; height: 563px; overflow: hidden; background-color: #1b1b1b; }
   
3. .movie { overflow: hidden; background: #333; margin-bottom: 5px; }
   
4. #video { position: relative; z-index: 102; }
   
5. .videolist a { float: left; display: block; padding: 0 8px; height: 30px;line-height:30px; font-size: 13px; color: #FFF;/*font-weight:bold;*/ text-align: center; width:15.777777%;}
   
6. .videolist a:hover { color: #17B2FA; }
   
7. .videolist .on { background: #ff6a00; color: #fff; border-radius: 2px; }
   
8. .videolist .on:hover { color: #fff; }
   
9. .videolist .videolist_ctrl { font-size: 12px; color: #FFF; background: url(../images/hist_ico.png) right 10px no-repeat; font-weight: normal; }
   
10. .videolist .videolist_ctrl:hover { color: #02a1d9; background: url(../images/hist_ico.png) right -8px no-repeat; }
    
11. .videolist a.on_ctrl { text-decoration: none; color: #ED6D00;background-color:#1b1b1b;width:15.888%;border-radius:25px;}
    
12. .videolist a.on_ctrl:hover { }
    
13. div.movie_bot { bottom: 2px; height: 250px; width: 410px; position: fixed; z-index: 100000; _position: absolute; _top:expression(eval(document.documentElement.scrollTop));margin-left: 830px; clip: rect(200px,auto,auto,auto); padding-bottom: 150px;/*border: 2px solid #F60;*/ }

复制代码

添加个js代码

1. function playzgs() {
   
2.     if ($("#play_right").is(":hidden")) {
   
3.         $("#play_right").show(500);
   
4.         setTimeout(function() {
   
5.             $("#playzgs").removeClass("prevBtn").addClass("nextBtn");
   
6.         }, 200);
   
7.     } else {
   
8.         $("#play_right").hide(300);
   
9.         setTimeout(function() {
   
10.             $("#playzgs").removeClass("nextBtn").addClass("prevBtn");
    
11.         }, 400);
    
12.     }
    
13. }
    
14. $(function() {
    
15.     $(window).scroll(function() {
    
16.         if ($(window).scrollTop() >= 600) {
    
17.             $(".MacPlayer").addClass("movie_bot");
    
18.         } else {
    
19.             $(".MacPlayer").removeClass("movie_bot");
    
20.         }
    
21.     });
    
22. });
    
23. 
    
24. onresize = function() {
    
25.     $("#shadow").css("height", $(document).height());
    
26. }

复制代码

搞定了，自己去测试效果吧
可以打开这个网站的播放页面，然后下拉到底部看效果 www.dianying66.cc