<p> 如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(<a href="http://www.apple.com/cn/iphone-5c/" target="_blank">查看</a>),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。 </p> <p> fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: </p> <ul> <li> 支持鼠标滚动 </li> <li> 支持前进后退和键盘控制 </li> <li> 多个回调函数 </li> <li> 支持手机、平板触摸事件 </li> <li> 支持 CSS3 动画 </li> <li> 支持窗口缩放 </li> <li> 窗口缩放时自动调整 </li> <li> 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等 </li> </ul> <p> 与wow.js结合后,效果会更加炫酷。 </p> <h3> &nbsp; &nbsp; wow.js动作无效解决办法: </h3> <p> 问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下 </p> <p> <pre class="prettyprint lang-js">$('#fullpage').fullpage({   scrollBar:true;   });</pre> </p> <p> 最后利用css将滚动条隐藏,将html添加overflowhidden,代码如下 </p> <p> <pre class="prettyprint lang-css">html{ overflow:hidden; }</pre> </p> <p> <br /> </p> <p> <br /> </p>