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

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

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

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 浏览次数:150

如何专业完成响应式...

随着科技互联网时代的发展,各种跨屏幕的设备层出不穷,小到智能手表...

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

方维网络:响应式网站设计的...

在方维网络看来,PC端和移动端存在的差异始终无法调和,这是由两者使...

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

深圳响应式网站建设公司分...

对于很多外行来说,听到“响应式网站”的第一反应是——啥是响应式...

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

【签约】深圳南方硅谷中英...

南方硅谷是一家提供无线通信芯片和解决方案的集成电路设计公司,网...

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

响应式商城网站建设...

页面策划、响应式设计及制作 设计 网站策...

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

【签约】添佰丽地板响应式...

添佰丽始于1999年,是国内第一批强化木地板企业之一。非常感谢对方...

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

响应式网站页面以及框架设...

随着大家使用智能手机和平板电脑的频率越来越高,多终端网站需...

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

企业网站商城适合采用响应...

想要知道企业网站商城适合采用响应式设计吗这个问题,就必须要先...

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

【签约】爱图仕影像器材响...

网站采用响应式设计模式 主要是现在终端尺寸实在太多了,PC端的有...

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

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

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

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

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

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

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

相关标签
响应式网站设计响应式网站响应式网站建设响应式图片响应式官网响应式官网建设
网站建设解决方案
外贸网站解决方案门户网站解决方案手机微信网站解决方案