设置全屏和退出全屏
//全屏设置 $('#fullscreen').on('click', function () { fullscreen(); }); //退出全屏 $('#exitfullscreen').on('click', function () { exitfullscreen(); }); //进入全屏 function fullscreen() { var obj = document.getelementbyid('editmark'); if (obj.requestfullscreen) { obj.requestfullscreen(); } else if (obj.webkitrequestfullscreen) { obj.webkitrequestfullscreen(); } else if (obj.msrequestfullscreen) { obj.msrequestfullscreen(); } else if (obj.mozrequestfullscreen) { obj.mozrequestfullscreen(); } } function exitfullscreen() { var obj = document.getelementbyid('editmark'); if (document.exitfullscree) { document.exitfullscree(); } else if (document.webkitexitfullscreen) { document.webkitexitfullscreen(); } else if (document.msexitfullscreen) { document.msexitfullscreen(); } else if (document.mozcancelfullscreen) { document.mozcancelfullscreen(); } }
监听全屏事件
//监听全屏 document.addeventlistener('fullscreenchange', function () { if (document.fullscreenelement) { alert(1); } else { alert(2); } }, false); document.addeventlistener('msfullscreenchange', function () { if (document.msfullscreenelement) { alert(1); } else { alert(2); } }, false); document.addeventlistener('mozfullscreenchange', function () { if (document.mozfullscreen) { alert(1); } else { alert(2); } }, false); document.addeventlistener('webkitfullscreenchange', function () { if (document.webkitisfullscreen) { alert(1); } else { alert(2); } }, false);
以上这篇元素全屏的设置与监听实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论