简要教程
这是一款可以自动将HTML5视频播放器在页面向下滚动时,将其固定在页面右下角位置的jquery和CSS3效果。
使用方法
在页面中引入jquery文件。
HTML结构
使用一个
Your browser does not support HTML5 video.
CSS样式
为视频元素添加下面的简单CSS样式:
#videoBox {
border: 10px solid #212223;
transition: 0.5s;
}
video {
width: 100%;
vertical-align: bottom;
}
#videoBox.in {
animation: ac 1s;
}
#videoBox.out {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
z-index: 999;
animation: an 0.5s;
}
初始化插件
最后使用jquery来检测窗口的滚动事件,并在合适的位置切换videoBox的class类,使其隐藏和出现在右下角。
var ha = ( $('#videoBox').offset().top + $('#videoBox').height() );
$(window).scroll(function(){
if ( $(window).scrollTop() > ha + 500 ) {
$('#videoBox').css('bottom','0');
} else if ( $(window).scrollTop()
$('#videoBox').removeClass('out').addClass('in');
} else {
$('#videoBox').removeClass('in').addClass('out');
$('#videoBox').css('bottom','-500px');
};
});
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!