簡要教程

這是一款可以自動將HTML5視頻播放器在頁面向下滾動時，將其固定在頁面右下角位置的jquery和CSS3效果。

使用方法

在頁面中引入jquery文件。

HTML結構

使用一個

元素來包裹HTML5視頻元素。

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頻道！

總結

以上是生活随笔為你收集整理的自动滚放的html,HTML5实现视频播放器随页面滚动固定页面右下角效果详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。