美文网首页
JS操作文章内容图片点击全屏显示笔记!

JS操作文章内容图片点击全屏显示笔记!

作者: DragonersLi | 来源:发表于2021-02-28 15:31 被阅读0次
    image.png
    <!--文章内容-->
     <div class="article-center">{$data.content|htmlspecialchars_decode=###}</div>
    <!--全屏容器-->
    <div id="show"><img src="" id="img_show"></div>
    
    <!--js代码-->
    <script>
        $(function () {
            $('img').click(function () {
                     $("#img_show").attr('src',$(this).attr('src'));
                     var element =document.getElementById("show");
                    //某个元素有请求
                    var requestMethod =element.requestFullScreen
                        ||element.webkitRequestFullScreen //谷歌
                        ||element.mozRequestFullScreen  //火狐
                        ||element.msRequestFullScreen; //IE11
                    if (requestMethod) {
                        requestMethod.call(element);   //执行这个请求的方法
                    } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
                        //这里其实就是模拟了按下键盘的F11,使浏览器全屏
                        var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
                        if (wscript !== null) {    //创建成功
                            wscript.SendKeys("{F11}");//触发f11
                        }
                    }
            })
        });
    
    
    </script>
    
    

    相关文章

      网友评论

          本文标题:JS操作文章内容图片点击全屏显示笔记!

          本文链接:https://www.haomeiwen.com/subject/yeqquqtx.html