苹果CMS V10滚动悬浮播放器样式改造教程

发布时间：2024-09-29共14人阅读

一、功能简介

默认苹果CMS播放器随页面滚动会跟随消失，本教程通过嵌入样式与监听滚动事件，实现播放器悬浮固定功能。用户向下滚动页面时，播放器自动缩小并固定在页面右下角；滚动回顶部时恢复原始全屏播放样式，适配各类V10影视模板。

二、代码部署路径

将功能代码添加至站点模板公共引入文件中，路径如下：template/模板名称/html/index/include.html，写入代码后保存即可全局生效。

三、完整悬浮播放器代码

文件内新增样式、jQuery兼容判断以及滚动监听JS代码，完整源码如下：

<style type="text/css">
.in {
 animation: ac 1s;
}
.out {
 position: fixed; 
 bottom: 50%;
 right: 1%;
 z-index: 999;
 animation: an 0.5s;
}
</style>
<script>window.jQuery || document.write('<script src="/macplus/js/jquery-1.11.0.min.js"></script>')</script>
<script type="text/javascript">
 window.onload=function(){
 var ha = ($('.MacPlayer').find('table').offset().top + $('.MacPlayer').find('table').height());
 $(window).scroll(function(){ 
 if ( $(window).scrollTop() > ha ) { 
 $('.MacPlayer').find('table').removeClass('in').addClass('out');
 $('.MacPlayer').find('table').css('height','200px');
 $('.MacPlayer').find('table').css('width','350px');
 } else if ( $(window).scrollTop() < ha) { 
 $('.MacPlayer').find('table').removeClass('out').addClass('in'); 
 $('.MacPlayer').find('table').css('height','100%');
 } 
 });
}
</script>

四、自定义参数调整说明

代码内支持自定义悬浮播放器位置和尺寸，可根据模板样式自由修改：

悬浮位置：代码中 bottom: 50%、right: 1% 分别控制悬浮播放器距离底部、右侧的距离，可自由修改像素或百分比数值。
悬浮尺寸：height:200px、width:350px 为悬浮状态下播放器的宽高，按需调整大小。
层级权重：z-index: 999 保证播放器悬浮在页面最上层，不会被其他模块遮挡。

五、功能运行原理

页面加载完成后，代码自动获取原播放器的顶部定位与高度数值作为临界点。当页面滚动距离超过临界点，自动为播放器添加悬浮样式、修改固定尺寸；当页面滚动回顶部临界点以内，移除悬浮样式，播放器恢复默认全屏自适应状态，搭配动画属性实现平滑切换效果。

六、部署注意事项

代码自带jQuery依赖检测，模板未加载jQuery时会自动引入本地依赖文件，避免功能失效。修改参数后建议清空网站缓存与浏览器缓存，测试滚动效果，保证悬浮切换动画正常运行。

苹果cms教程