<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5视频播放器随页面滚动固定页面右下角效果|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>HTML5视频播放器随页面滚动固定页面右下角效果 <span>Scroll-triggered Fixed Video Player </span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/yinpinheshipin/201704074443.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<h3 style="text-align: center;padding: 1em 0;">点击打开视频，并将页面向下滚动查看效果！</h3>
<div id="site">
<div id="videoBox" class="box">
<video width="400" controls>
<source src="video/2.mp4" type="video/mp4">
你的浏览器不支持 HTML5 video
</video>
</div>
<div id="bloc">
<div id="commentsBox" class="box">
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
<div><p><span></span><span></span><span></span><span></span></p></div>
</div>
<div id="suggBox" class="box">
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
<div><p><span></span></p></div>
</div>
</div>
</div>
<div class="related">
<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201606243645.html">
<img src="related/1.jpg" width="300" alt="移动友好的HTML5全屏背景视频特效插件"/>
<h3>移动友好的HTML5全屏背景视频特效插件</h3>
</a>
<a href="http://www.htmleaf.com/html5/yinpinheshipin/201511012731.html">
<img src="related/2.jpg" width="300" alt="HTML5全屏背景视频jQuery插件"/>
<h3>HTML5全屏背景视频jQuery插件</h3>
</a>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript">
var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );
$(window).scroll(function(){
if ( $(window).scrollTop() > ha + 500 ) {
$('#videoBox').css('bottom','0');
} else if ( $(window).scrollTop() < ha + 200) {
$('#videoBox').removeClass('out').addClass('in');
} else {
$('#videoBox').removeClass('in').addClass('out');
$('#videoBox').css('bottom','-500px');
};
});
</script>
</body>
</html>
HTML5视频播放器随页面滚动固定页面右下角效果
需积分: 46 197 浏览量
2019-12-12
21:00:15
上传
评论
收藏 2.01MB ZIP 举报
201704071459.zip （15个子文件） 
201704071459 css 
reset.min.css 773B htmleaf-demo.css 6KB style.css 1KB related 
2.jpg 25KB 1.jpg 20KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 5KB js jquery-1.11.0.min.js 94KB video 
2.mp4 1.94MB scss style.scss 2KB jQuery之家.url 268B readme.html 865B资源评论
