做服务更好的
网站建设公司
当前位置:首页 > 建站资讯 > 网站建设

浅淡jQuery全屏滚动插件fullPage.js中响应式功能

发表日期:2018-05-15 09:01:58作者来源:方维网络浏览次数:414 标签: 响应式网站设计    

fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。
 
fullPage.js的主要功能有:支持鼠标滚动、支持前进后退和键盘控制、多个回调函数、支持手机、平板触摸事件、支持 CSS3 动画、支持窗口缩放、窗口缩放时自动调整、可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等
 
对于fullpage.js的配置、方法和回调函数这里就不再赘述了,这里主要介绍一下响应式的功能。

在 fullPage 2.5.4 版本中,对于排版密集的页面想要根据浏览器窗口大小来判断是否需要取消fullpage中自带的滚屏效果而采用一般网页的滚动效果,只需添加如下代码即可:

jquery响应式
调用这个方法完全能实现上述效果,缺点是各个模块的高度是由fullpage.js本身获取的浏览器高度决定的,也就是原本各个section的全屏高度,对于排版密集的页面在低分辨率屏幕上的显示不是很友好。
 
而在 fullPage 2.7.3 版本中,要实现上诉效果则需要调用另一种方法,代码如下:
 
fullPage

// $.fn.fullpage.destroy('type')//销毁fullpage特效,type可以不写。或者使用all。不写type,fullpage给页面添加的样式和html元素还在
     //如果使用all,则样式\html等全部销毁,页面恢复和不使用fullpage相同的效果
运用这种方法则上面那种方法的限制解除了,各个模块的高度不受section 获取的值限制了,而是根据各个模块内容的高度而自动调整相应的高度,对于排版密集的页面在低分辨率屏幕上的显示算是比较好的一种处理方式了。
 
当然,在低分率中页面内容想要显示美观还是需要另外调整css样式了。

作者:方维网络乐文庆
如没特殊注明,文章均为方维网络原创,转载请注明来自http://www.szfangwei.cn/news/4306.html

相关网站设计案例

相关推荐新闻

响应式网页设计中图片...

比较传统的网页设计和响应式网页设计,用户可以直观感受到一个不同...

日期:2018-05-15 浏览次数:133

方维网络:响应式网站...

谈及响应式网站的优点,可以轻而易举地列出很多——适应不同设备、...

日期:2018-05-15 浏览次数:124

【签约】广东迅实科技有限...

We set up the Bit Miner Chain (BTMC) project based on the Bl...

日期:2018-05-15 浏览次数:175

响应式网站如何兼顾设计...

响应式网站又叫自适应网站,可以适应所有终端(PC+手机+ipad)因为考虑...

日期:2018-05-15 浏览次数:166

【签约】深圳市洋浦科技有...

网站导航栏目:首页、关于我们、产品中心、新闻资讯、解决方案、...

日期:2018-05-15 浏览次数:228

【签约】基业长青中文响应...

基业长青成立于2002年,是一家专注于为行业领先与高成长性的中国...

日期:2018-05-15 浏览次数:225

【签约】深圳市圣景创筑环...

公司介绍 圣景创筑是一家以创想与构筑为己任的设计和施...

日期:2018-05-15 浏览次数:234

【签约】深圳市银达控股集...

银达控股集团成立于2009年12月,注册资本2亿元人民币,总部位于深...

日期:2018-05-15 浏览次数:253

【签约】中国节能皓信环境...

网站基本信息 网站类型:企业网站 版式预期:欧美简约 ...

日期:2018-05-15 浏览次数:228

响应式网站到底适不适合做...

在SEO大行其道的时候,还没有响应式网站。响应式网站是“移动优先...

日期:2018-05-15 浏览次数:384

方维网站设计师:那些...

“不要为了美观而设计”,一开始新入行业的我也曾经犯过这个错,一个...

日期:2018-05-15 浏览次数:381

网站服务器配置之Windows...

作为一个网站开发程序员,技不光要写好自己的代码,同时也要足够了解...

日期:2018-05-15 浏览次数:421

相关标签
响应式网站设计响应式网站响应式网站建设响应式图片响应式官网响应式官网建设
网站建设解决方案
大视频短视频网站解决方案搜索引擎优化解决方案响应式网站建设方案