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

2021-02-28  本文已影响0人  DragonersLi
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>

上一篇 下一篇

猜你喜欢

热点阅读