昨天做了一个满屏滚动的效果，我之前没怎么做过，然后发现这个东西说难也不难，有很多jQuery的插件可以做到，这种效果一般适用于广告页面什么的。比如小米4手机的广告页面、360路由器的广告页面、iPhone5c的广告页等等还有许多，这里就不一一列举了，不过他们的共同点是基本上都没有导航和网站底部内容，或者说在第一屏有个窄的导航条，大多数没有底部内容。这其中小米4手机和360路由器的广告页的的导航和底部处理的很好，兼顾了导航和底部。
小米手机的这个广告页之前刚开始出来的时候使用的是fullpage.js的那个插件，也是我使用的这个，但是后来小米很快就换了自己的东西，我是菜鸟，写不出来，只能用插件咯，这个插件用起来还是很方便的首先去下载到这个fullpage.js。然后解压出来使用，在项目中引入相关的文件
<link rel="stylesheet" href="css/jquery.fullpage.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullpage.min.js"></script>
结构也很简单，容易上手
<div id="style">
<div class="section"><h3>第一屏</h3></div>
<div class="section"><h3>第二屏</h3></div>
<div class="section"><h3>第三屏</h3></div>
</div>
每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如
<div class="section active">第三屏</div>
这个东西很简单，但是问题在于我想的太简单了。后来发现在实际效果中有一些注意事项：
1、内容要放在一定的尺寸里面，不要全屏，不然在小屏幕下会切掉一些内容
2、图片较多的情况下，一定要在保证清晰度的情况下，尽量压缩图片的大小，不然在这个大所数人的网速都很慢的情况下会影响用户使用的效果的
3、如果可以的话，加上一些css3的动画，让里面的一些元素能够有一切加载的特效什么的，来增加阅读性，全部是静态的东西会比较死板
作为一个前端菜鸟，js要学好，但是现阶段呢能使用插件的时候不要吝啬，jQuery的很多插件不错，等到能够自己写的时候，也可以去改一些插件的东西，或者直接写组件。尽量让自己写一些东西，自己的才会和项目比较契合，不会有任何冲突，改起来也很清楚，要改什么
网友评论