js--點選按鈕讓某div全屏顯示退出全屏

阿新 • • 發佈：2021-02-12

html頁面程式碼，如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="fullscreenstyle.css" type="text/css" rel="stylesheet" />
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js" 
></script>
    <script src="jquery.fullscreenslides.js"></script>

    <script id="sample">

$(function(){

    $('#demo').fullscreenslides();

  var $container = $('#fullscreenSlideshowContainer');

  $container

    .bind("init", function() {

        $container
            //追加新的div（allmap） 到容器裡 

            .append('<div  id="allmap" style="width: 190px; height: 120px; background-color:yellow; "></div>')

        //新的divdiv的點選事件
        //$('#allmap').click(function () {

        //});
    })

});

    </script>

</head>
<body>
    <div class=" 
wrapper" style="width: 620px;padding: 20px 0; margin: auto; text-align: left;">

        <div class="image">
            <a rel="gallery" href="#">
                <div id="demo" style="background-color:yellow;  width: 40px;  height: 20px;">點選我看效果</div>
            </a>
        </div>

    </div>

</body>
</html>

參考：https://www.jq22.com/demo/jqueryfullscreen-141110205337/

引用的css檔案程式碼如下：

#fullscreenSlideshowContainer .ui{position:absolute;font-family:sans-serif;z-index:10;font-size:2em}#fs-loader,#fs-prev,#fs-next,#fs-close{background-color:#000;color:#fff;font-weight:700;cursor:pointer;line-height:1em}#fs-close{top:1em;right:1em}#fs-prev,#fs-next{top:50%;margin-top:-1em}#fs-prev{left:1em}#fs-next{right:1em}#fs-loader{top:50%;left:50%;height:1em;margin-top:-1em;margin-left:-75px;display:none}#fs-caption{bottom:20px;text-align:center;width:100%;left:0;line-height:1em;display:none}#fs-caption span{background-color:#fff}#fs-loader,#fs-prev,#fs-next,#fs-close,#fs-caption span{padding:5px 15px;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-khtml-border-radius:3px;border-radius:3px}

引用的js 檔案程式碼，如下：

;(function($){var $container;var attachEvents=function(){$container.bind("updateSize orientationchange",function(event){$container.height($(window).height());updateSlideSize();});var updateSlideSize=function(slide){if(slide===undefined){var slide=$container.data("currentSlide");}
if(slide&&slide.$img){var wh=$(window).height();var ww=$(window).width();if((ww/wh)>(slide.$img.width()/slide.$img.height())){slide.$img.css({"height":wh+"px","width":"auto"});}else{slide.$img.css({"height":"auto","width":ww+"px"});}
slide.$img.css({"margin-left":"-"+(0.5*slide.$img.width())+"px","margin-top":"-"+(0.5*slide.$img.height())+"px"});}}
$(window).bind("resize",function(){$container.trigger("updateSize");});var isLoading=false;$container.bind("showSlide",function(event,newSlide){if(!isLoading){var oldSlide=$container.data("currentSlide");if(!("$img"in newSlide)){isLoading=true;$container.trigger("startLoading");newSlide.$img=$('<img class="slide">').css({"position":"absolute","left":"50%","top":"50%"}).hide().load(function(){isLoading=false;$container.trigger("stopLoading");updateSlideSize(newSlide);changeSlide(oldSlide,newSlide);}).error(function(){isLoading=false;newSlide.error=true;$container.trigger("stopLoading").trigger("error",newSlide);}).attr("src",newSlide.image);$container.append(newSlide.$img);}else{changeSlide(oldSlide,newSlide);}}});$container.bind("prevSlide nextSlide",function(event){var nextID,slides=$container.data("slides"),currentSlide=$container.data("currentSlide"),currentID=currentSlide&&currentSlide.id||0;if(event.type=="nextSlide"){nextID=(currentID+1)%slides.length;}else{nextID=(currentID-1+slides.length)%slides.length;}
$container.trigger("showSlide",slides[nextID]);});var changeSlide=function(oldSlide,newSlide){if(oldSlide!==undefined){$container.trigger("endOfSlide",oldSlide);oldSlide.$img.fadeOut();}
if(newSlide.$img&&!newSlide.error){newSlide.$img.fadeIn(function(){$container.trigger("startOfSlide",newSlide);});}else{$container.trigger("startOfSlide",newSlide);}
$container.data("currentSlide",newSlide);}
var keyFunc=function(event){if(event.keyCode==27){$container.trigger("close");}
if(event.keyCode==37){$container.trigger("prevSlide");}
if(event.keyCode==39){$container.trigger("nextSlide");}}
$container.bind("close",function(){var options=$container.data("options");var oldSlide=$container.data("currentSlide");oldSlide&&oldSlide.$img&&oldSlide.$img.hide();$container.trigger("endOfSlide",oldSlide);$(document).unbind("keydown",keyFunc);if(options.useFullScreen){if(document.cancelFullScreen){document.cancelFullScreen();}
if(document.mozCancelFullScreen){$("html").css("overflow","auto");$(document).scrollTop($container.data("mozScrollTop"));document.mozCancelFullScreen();}
if(document.webkitCancelFullScreen){document.webkitCancelFullScreen();}
document.removeEventListener('fullscreenchange',changeFullScreenHandler);document.removeEventListener('mozfullscreenchange',changeFullScreenHandler);document.removeEventListener('webkitfullscreenchange',changeFullScreenHandler);}else{$container.data("hiddenElements").show();$(window).scrollTop($container.data("originalScrollTop"));}
$container.removeData("currentSlide slides width height originalScrollTop hiddenElements").hide();});function changeFullScreenHandler(event){if($container.data("isFullScreen")){$container.trigger("close");}
$container.data("isFullScreen",true);}
var firstrun=true;$container.bind("show",function(event,rel,slide){var options=$container.data("options");var slideshows=$container.data("slideshows");var slides=slideshows[rel];$container.data("slides",slides);$container.trigger("updateSize");$(document).bind("keydown",keyFunc);if(options.useFullScreen){con=$container[0];if(con.requestFullScreen){con.requestFullScreen();document.addEventListener('fullscreenchange',changeFullScreenHandler);}
if(con.mozRequestFullScreen){con.mozRequestFullScreen();document.addEventListener('mozfullscreenchange',changeFullScreenHandler);$container.data("mozScrollTop",$(document).scrollTop());$("html").css("overflow","hidden");}
if(con.webkitRequestFullScreen){con.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);document.addEventListener('webkitfullscreenchange',changeFullScreenHandler);}
$container.data("isFullScreen",false);}
if(firstrun){$container.trigger("init");firstrun=false;}
if(!options.useFullScreen){$container.data("hiddenElements",$('body > *').filter(function(){return $(this).css("display")!="none";}).hide());}
if(!$container.data("originalScrollTop")){$container.data("originalScrollTop",$(window).scrollTop());}
$container.show();$container.trigger("showSlide",slide);});}
$.fn.fullscreenslides=function(options){$container=$('#fullscreenSlideshowContainer');if($container.length==0){$container=$('<div id="fullscreenSlideshowContainer">').hide();$("body").append($container);attachEvents();}
var options=$.extend({"bgColor":"#000","useFullScreen":true,"startSlide":0},options||{});options.useFullScreen=options.useFullScreen&&!!($container[0].requestFullScreen||$container[0].mozRequestFullScreen||$container[0].webkitRequestFullScreen);$container.data("options",options);$container.css({"position":"absolute","top":"0px","left":"0px","width":"100%","text-align":"center","background-color":options.bgColor});var slideshows={};this.each(function(){var link=$(this).parents("a")[0];if(!link.rel)link.setAttribute("rel","__all__");var slide={image:link.href,title:link.title,rel:link.rel};slide.data=$.extend({},$(this).data(),$(link).data());slideshows[slide.rel]=slideshows[slide.rel]||[];slideshows[slide.rel].push(slide);slide.id=slideshows[slide.rel].length-1;$(link).data("slide",slide);$(link).click(function(event){$container.trigger("show",[this.rel,$(this).data("slide")]);event.preventDefault();});});$container.data("slideshows",slideshows);}})(jQuery);