jQuery全屏滚动插件fullPage.js取消全屏切换，怎么设置每一屏的高度不以电脑屏幕高度为默认高度

#section5,

#section5 fp-slide,

#section5 fp-tableCell,

footer,

footer fp-slide,

footer fp-tableCell

{

height: auto !important;

}

这个是页面高度根据内容高度变化的，

autoScrolling:false, 这个是关闭自动滚一整屏的。

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：

运行效果图如下：

主要代码如下：

$(function()

{

//加载时的

var

$loader=

$('#st_loading');

//获取的ul元素

var

$list=

$('#st_nav');

//当前显示的

var

$currImage

=

$('#st_main')children('img:first');

//加载当前的

//同时显示导航的项

$('<img>')load(function(){

$loaderhide();

$currImagefadeIn(3000);

//滑出导航

setTimeout(function(){

$listanimate({'left':'0px'},500);

},

1000);

})attr('src',$currImageattr('src'));

//计算出将被显示的略缩图所在的div元素的宽度

buildThumbs();

function

buildThumbs(){

$listchildren('lialbum')each(function(){

var

$elem

=

$(this);

var

$thumbs_wrapper

=

$elemfind('st_thumbs_wrapper');

var

$thumbs

=

$thumbs_wrapperchildren(':first');

//每张略缩图占有180像素的宽度和3像素的间距(margin)

var

finalW

=

$thumbsfind('img')length

183;

$thumbscss('width',finalW

+

'px');

//是这元素具有滚动性

makeScrollable($thumbs_wrapper,$thumbs);

});

}

//点击菜单项目的时候（向上向下箭头切换）

//使略缩图的div层显示和隐藏当前的

//打开菜单（如果有的话）

$listfind('st_arrow_down')live('click',function(){

var

$this

=

$(this);

hideThumbs();

$thisaddClass('st_arrow_up')removeClass('st_arrow_down');

var

$elem

=

$thisclosest('li');

$elemaddClass('current')animate({'height':'170px'},200);

var

$thumbs_wrapper

=

$thisparent()next();

$thumbs_wrappershow(200);

});

$listfind('st_arrow_up')live('click',function(){

var

$this

=

$(this);

$thisaddClass('st_arrow_down')removeClass('st_arrow_up');

hideThumbs();

});

//点击略缩图，改变大的

$listfind('st_thumbs

img')bind('click',function(){

var

$this

=

$(this);

$loadershow();

$('<img

class="st_preview"/>')load(function(){

var

$this

=

$(this);

var

$currImage

=

$('#st_main')children('img:first');

$thisinsertBefore($currImage);

$loaderhide();

$currImagefadeOut(2000,function(){

$(this)remove();

});

})attr('src',$thisattr('alt'));

})bind('mouseenter',function(){

$(this)stop()animate({'opacity':'1'});

})bind('mouseleave',function(){

$(this)stop()animate({'opacity':'07'});

});

//隐藏当前已经打开了的菜单的函数

function

hideThumbs(){

$listfind('licurrent')

animate({'height':'50px'},400,function(){

$(this)removeClass('current');

})

find('st_thumbs_wrapper')

hide(200)

andSelf()

find('st_link

span')

addClass('st_arrow_down')

removeClass('st_arrow_up');

}

//是当前的略缩图div层滚动

//当鼠标移至菜单层的时候会自动地进行滚动

function

makeScrollable($outer,

$inner){

var

extra

=

800;

//获取菜单的宽度

var

divWidth

=

$outerwidth();

//移除滚动条

$outercss({

overflow:

'hidden'

});

//查找容器上的最后一张

var

lastElem

=

$innerfind('img:last');

$outerscrollLeft(0);

//当用户鼠标离开菜单的时候

$outerunbind('mousemove')bind('mousemove',function(e){

var

containerWidth

=

lastElem[0]offsetLeft

+

lastElemouterWidth()

+

2extra;

var

left

=

(epageX

-

$outeroffset()left)

(containerWidth-divWidth)

/

divWidth

-

extra;

$outerscrollLeft(left);

});

}

});

希望本文所述对大家的jQuery程序设计有所帮助。

alert($(window)height()); //浏览器时下窗口可视区域高度

alert($(document)height()); //浏览器时下窗口文档的高度

alert($(documentbody)height());//浏览器时下窗口文档body的高度

alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin

alert($(window)width()); //浏览器时下窗口可视区域宽度

alert($(document)width());//浏览器时下窗口文档对于象宽度

alert($(documentbody)width());//浏览器时下窗口文档body的高度

alert($(documentbody)outerWidth(true));

把第一页的 <li data-menuanchor="page1" class="active"> 里面的class="active" 去掉 默认一开始就不显示第一个了

如果第一页不显示了，在页面初始化的地方 给它加上active这个class属性 就能实现初始化第一页就有动画效果了

afterRender以你的代码给你举个例子

$fnfullpage({

slidesColor: ['#fff', '#fff', '#fff', '#fff', '#fff'],

anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],

menu: '#menu',

afterRender: function(){

alert('ok');

}

});

纯手打，有问题欢迎咨询

给你一个参考地址：

>

你可以找到他的demo文件，然后把没用的内容一个个删除，当然每删一个就要做一次测试，当这个demo文件你删到不能再删的时候，剩下的就是这个插件需要的网页基本架构，然后你再往里面填你的东西就好了。修改demo之前要先把demo文件备份啊，要不然还要麻烦。

以上就是关于jQuery全屏滚动插件fullPage.js取消全屏切换，怎么设置每一屏的高度不以电脑屏幕高度为默认高度全部的内容，包括:jQuery全屏滚动插件fullPage.js取消全屏切换，怎么设置每一屏的高度不以电脑屏幕高度为默认高度、jQuery实现带滚动导航效果的全屏滚动相册实例、Jquery如何获取浏览器窗口宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！