网页游戏不能全屏显示(网页游戏可以全屏吗)

网页游戏不能全屏显示(网页游戏可以全屏吗)

前沿拓展：网页游戏不能全屏显示

本文用案例说明怎样利用鼠标滚轮控制全屏切换、遮罩动画。来借鉴一下吧~

效果如下：

分析实现目标：

自适应全屏鼠标滚轮控制切换图片及文字的动画

分析元素：

图片、文字、背景在切换下一个页面的时候，当前页面的图片、文字元素都有动画，动画结束后才切换到下一页图片有遮罩动画文字有位移变化

步骤一：设置结构

根据以上分析，banner的结构如下：每个状态里存放每张banner的图片、文字元素，这里设置了4张banner

因为要根据浏览器大小自适应，所以将每个banner里面的图片和文字组合如“4（Group）”，一起定位，当然你也可以分别定位。

步骤二：放置元素

banner1只有文字内容，就直接放置进去

banner2、banner3、banner4结构一样的：图片、文字、背景，文字是比较简单的位移变化，但是图片有动画。其中图片效果拆分底图、遮罩、结果三个图片如下：

这里遮罩“B”处是透明的，周围颜色必须跟banner背景色相同。

步骤三：实现全屏自适应

网页加载时（OnPageLoad）或者banner加载时添加事件：

设置banner动态面板的宽=浏览器窗口的宽度、高=浏览器窗口的高度因为第一个页面一开始就要打开，所以这里就要设置好元素的位置，第一个页面只有文字且居中，所以设置其位移x=窗口宽度/2-文字宽度/2、y=窗口高度/2-文字高度/2

步骤四：实现滚轮切换

1. 撑页面高度并能滚动

页面内容的高度大于窗口高度Window.height，所以需要增加页面内容，这里使用了一个热区，因为它是透明的，不碍眼。设置它的位移让它来撑起页面的高度。

这个高度不一定非要Window.height*页面数，如果是简单的滚动切换，这样设置是有用的，但是这里切换时有很多动画效果，所以跟页面数没有直接关系，只要高度让滚动起来比较方便即可。

2. 设置banner面板始终固定在顶部

因为上面已经撑高了页面，页面会滚动，所以需要设置banner面板始终显示

3. 滚动切换页面

拓展知识：网页游戏不能全屏显示