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

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
网友评论