整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。
演示效果图：
1、全屏前
2、全屏后
html代码：
<div class="container">
<p><em>单击下面的按钮将元素输入全屏模式</em></p>
<div class="element" id="element"><p>我在全屏模式下改变颜色！</p></div>
<br />
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
全屏!
</button>
</div>
css代码：
.container {
margin: 40px auto;
max-width: 700px;
}
.element {
padding: 20px;
height: 300px;
width: 100%;
background-color: skyblue;
}
.element p {
text-align: center;
color: white;
font-size: 3em;
}
.element:-ms-fullscreen p {
visibility: visible;
}
.element:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
来源网络，侵权联系删除
私信我或关注微信号：狮范儿，回复：学习，获取免费学习资源包。
里巴巴店铺装修中离不开全屏轮换广告，由于阿里店铺装修原配的轮换图有点呆板，所以通过自己编写的特效代码来制作全屏轮换广告还是很有必要的。
(源代码特效观看及代码请在文末)
阿里店铺装修全屏广告轮换效果图
(由于画面问题，缩放显示了，正常宽度是 1920px或100%)
阿里店铺装修全屏广告轮换html代码
全屏广告轮换html代码解释：
① 属性的设置，这里nav(触发切换的标签)不使用默认，对应的是.lht_nav里面的li元素，切换的面板设置为.lht_pane，上下页按钮设置如图，触发动作设置成点击触发.
② li的触发标签个数与lht_pane面板的数量必须要一致。
阿里店铺装修全屏广告轮换css代码
全屏广告特效css部分说明：
① 这里涉及到一个css小技巧分享，对触发标签容器.lht设置文本居中，然后子元素设置为display:inline-block; (内联块状的意思，区别于float:left),这样里面的小模块就会在容器.lht里面居中了，这样能确保触发切换的按钮能一直画面中间
② 此处只是外部的箭头图片路径地址
③ .disabled类是当上下页失效(第一页和最后一页时)的特定类，小耐这里设置成不显示，也可以考虑设置成透明。
阿里巴巴国内店铺装修的全屏广告特效的基本代码就如上所示，此特效实际就是基于切换组件fx.tabs变通出来的特效，部分全屏特效是可以有缩率小图在左边或者右边，实际只要将触发标签里面的元素换成图片即可。
由于自媒体文章避免贴出代码展示网址，所以如果有意获取源代码，请访问小耐博客获取或阅读原文后获取。
我们设计使用大屏模板或大屏报表时，都会需要浏览器全屏展示预览的需求，通常我们都需要通过键盘F11来切换浏览器全屏效果。但是，也发现了一个问题就是我们面对的很多客户，他们并不懂F11可以全屏，给产品设计沟通带来了不便。那有没有什么方式可以直接通过鼠标点击按钮来切换全屏。答案是肯定有的，今天符号作者教大家如何利用前端的JS代码来实现浏览器全屏效果。
注意：
在看教程之前，请行了解一下，什么时javascirpt，JavaScript入门教程自行百度。当然，今天的案例RP也会免费提供给大家下载学习，也欢迎应用到更多的产品实践中去
JavaScript介绍：
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
先预览一下效果：
在线演示地址：Untitled Document
JS代码准备：
1、全屏代码：
javascript：
function requestFullScreen(element) {
var requestMethod = element.requestFullScreen ||
element.webkitRequestFullScreen ||
element.mozRequestFullScreen ||
element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
requestFullScreen(document.documentElement);2、退出全屏代码：
javascript：
function exitFull() {
var exitMethod = document.exitFullscreen ||
document.mozCancelFullScreen ||
document.webkitExitFullscreen ||
document.webkitExitFullscreen;
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
};
exitFull();Axure添加JS代码：
最早有发过一篇《Axure生成预览地址如何能查看到被浏览次数 | 人人都是产品经理》，有教过大家，Axure怎么添加JS外部代码，不懂的可以在回去看看。
步骤一：
打开Axure，拉取一个动态面板，创建2个State面板。一个面板里放一个矩形，命名为：全屏。另一个命名为：退出。如图：
步骤二：全屏交互制作
打开Axure，进入-全屏面板，点击添加鼠标点击事件，打开-当前链接-fx。
将前面准备好的全屏JS代码复制到FX里保存即可。要注意的是开头必须要加。javascript：
设置面板切换效果，如图，当点击时面板切换为退出面板。
步骤三：退出交互制作
打开Axure，进入-退出面板，点击添加鼠标点击事件，打开-当前链接-fx。
同样的将前面准备好的退出全屏JS代码复制到FX里保存即可。通样要注意的是开头必须要加。javascript：
至此，保存文件F5预览试试吧。教程相关文件下载：Axure页面全屏效果 - 产品大牛网
*请认真填写需求信息，我们会在24小时内与您取得联系。
