簡(jiǎn)要教程

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

使用方法

在頁(yè)面中引入jquery文件。

HTML結(jié)構(gòu)

使用一個(gè)

元素來包裹HTML5視頻元素。

Your?browser?does?not?support?HTML5?video.

CSS樣式

為視頻元素添加下面的簡(jiǎn)單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來檢測(cè)窗口的滾動(dòng)事件，并在合適的位置切換videoBox的class類，使其隱藏和出現(xiàn)在右下角。

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');

};

});

本文由職坐標(biāo)整理并發(fā)布，希望對(duì)同學(xué)們有所幫助。了解更多詳情請(qǐng)關(guān)注職坐標(biāo)WEB前端HTML5/CSS3頻道！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。