fullscreen - JSSOR 切换全屏
问题描述
嗨,我唯一想在 JSSOR 中拥有的是切换全屏画廊。我正在使用 JSSOR 的图片库版本。我想在右上角有一个全屏按钮,它可以切换全屏(不是全屏但最大化)视图,我可以在那里移动图像。
我没有在官方 jssor 页面或任何其他线程上看到任何教程。我想在右上角有这样的东西。有什么帮助吗?
解决方案
<script src="jssor.slider.min.js"></script>
<div id="jssor_1" style="position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div data-u="slides" style="position:absolute;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
<div><img data-u="image" src="image1.jpg" /></div>
<div><img data-u="image" src="image2.jpg" /></div>
</div>
<!-- https://www.jssor.com/development/slider-with-fixed-static-element.html -->
<img id="fullscreen_toggle_button" src="toggle-fullscreen.png" style="position:absolute;top:5px;right:5px;" />
</div>
<script>
var options = { $AutoPlay: 1 };
var jssor_1_slider_element = document.getElementById("jssor_1");
var jssor_1_slider_parent_element = jssor_1_slider_element.parentNode;
var jssor_1_slider = new $JssorSlider$(jssor_1_slider_element, options);
var isFullscreenMode = false;
var fullscreenElement;
var fullscreen_toggle_button_element = document.getElementById("fullscreen_toggle_button");
function ToggleFullscreen() {
isFullscreenMode = !isFullscreenMode;
if(isFullscreenMode) {
//create fullscreen div, move jssor slider into the div
fullscreenElement = document.createElement("div");
fullscreenElement.style.position = "fixed";
fullscreenElement.style.top = 0;
fullscreenElement.style.left = 0;
fullscreenElement.style.width = "100%";
fullscreenElement.style.height = "100%";
fullscreenElement.style.zIndex = 1000000;
document.body.appendChild(fullscreenElement);
var fullscreenRect = fullscreenElement.getBoundingClientRect();
var width = fullscreenRect.right - fullscreenRect.left;
var height = fullscreenRect.bottom - fullscreenRect.top;
fullscreenElement.appendChild(jssor_1_slider_element);
jssor_slider.$ScaleSize(width, height);
}
else if(fullscreenElement) {
//move jssor slider into its original container, remove the fullscreen div
jssor_1_slider_parent_element.appendChild(jssor_1_slider_element);
var width = jssor_1_slider_parent_element.clientWidth;
jssor_slider.$ScaleWidth(width);
document.body.removeChild(fullscreenElement);
fullscreenElement = null;
}
}
fullscreen_toggle_button_element.addEventListener("click", ToggleFullscreen);
</script>
推荐阅读
- flutter - 如何根据flutter中的id解析json数据
- vba - 在 VBA 脚本中使用列表框选择的值作为过滤器数组
- tensorflow - 修改局部变量accuracy/total:0
- macos - 如何在 Mac Os 中使用策略配置 chrome 扩展
- mysql - 查询 SELECT COALESCE(SELECT, ...) 不适用于 MySQL 8.0
- python - 将时间戳转换为时间戳
- python - 如何运行以分离模式运行的 Dramatiq 任务?
- python - 在计算学生平均成绩时忽略特定字母成绩
- python - 在 pandas to_sql 中使用方法和块大小时出错
- php - 当我在另一个系统上运行项目时出现错误...我该如何解决?