具有滚动导航效果的全屏滚动相册示例的

jQuery实现

本文描述了jQuery如何实现全屏滚动相册，具有滚动导航效果。分享给你，供你参考。如下所示:

操作效果图如下:

主要代码如下:

$(函数()

{

//加载时的图片

定义变量

$loader=

$('# st _ loading & # 39);

//获取的ul元素

定义变量

$list=

$('# st _ nav & # 39);

//当前显示的图片

定义变量

$ currImage

=

$('#st_main').children('img:first');$('# st _ main & # 39).儿童(& # 39；img:first & # 39；);

//加载当前图片

//同时显示导航的项目

$('<img>').load(function(){$('& ltimg & gt').load(function(){

$ loader . hide()；

$ cur image . fade in(3000)；

//滑出导航

setTimeout(function(){

$ list . animate({ & # 39；左& # 39；:'0px & # 39},500);

},

1000);

}).attr(& # 39；src & # 39，$ cur image . attr(& # 39；src & # 39));

//计算要显示的缩略图所在的div元素的宽度。

build thumbs()；

功能

buildThumbs(){

$ list . children(& # 39；李.相册& # 39；).each(function(){

定义变量

$elem

=

$(这个)；

定义变量

$拇指_包装器

=

$ elem . find(& # 39；.st _ thumbs _ wrapper & # 39);

定义变量

$拇指

=

$ thumbs _ wrapper . children(& # 39；:first & # 39);

//每个缩略图占据180像素的宽度和3像素的边距。

定义变量

finalW

=

$thumbs.find('img').length$ thumbs . find(& # 39；img & # 39).长度

*

183;

$ thumbs . CSS(& # 39；宽度& # 39；，最终

'px & # 39);

//此元素正在滚动。

makeScrollable($thumbs_wrapper，$ thumbs)；

});

}

//点击菜单项时(上下箭头切换)

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

//打开菜单(如果有)

$ list . find(& # 39；.st _ arrow _ down & # 39).直播(& # 39；点击& # 39；，函数(){

定义变量

$这个

=

$(这个)；

hide thumbs()；

$ this . addclass(& # 39；st _ arrow _ up & # 39).remove class(& # 39；st _ arrow _ down & # 39);

定义变量

$elem

=

$ this . closest(& # 39；李& # 39；);

$ elem . addclass(& # 39；当前& # 39；).动画({ & # 39；身高& # 39；:'170像素& # 39；},200);

定义变量

$拇指_包装器

=

$this.parent()。next()；

$ thumbs _ wrapper . show(200)；

});

$ list . find(& # 39；.st _ arrow _ up & # 39).直播(& # 39；点击& # 39；，函数(){

定义变量

$这个

=

$(这个)；

$ this . addclass(& # 39；st _ arrow _ down & # 39).remove class(& # 39；st _ arrow _ up & # 39);

hide thumbs()；

});

//点击缩略图可以换大图。

$ list . find(& # 39；.圣拇指

img & # 39).绑定(& # 39；点击& # 39；，函数(){

定义变量

$这个

=

$(这个)；

$ loader . show()；

$('<img$('& ltimg

class = & quotst _ preview & quot/& gt；').load(function(){

定义变量

$这个

=

$(这个)；

定义变量

$ currImage

=

$('#st_main').children('img:first');$('# st _ main & # 39).儿童(& # 39；img:first & # 39；);

$ this . insert before($ cur image)；

$ loader . hide()；

$ cur image . fadeout(2000，function(){

$(这个)。移除()；

});

}).attr(& # 39；src & # 39，$ this . attr(& # 39；alt & # 39));

}).绑定(& # 39；鼠标输入& # 39；，函数(){

$(这个)。停止()。动画({ & # 39；不透明度& # 39；:'1'});

}).绑定(& # 39；鼠标离开& # 39；，函数(){

$(这个)。停止()。动画({ & # 39；不透明度& # 39；:'0.7'});

});

//隐藏当前打开菜单的功能

功能

hideThumbs(){

$ list . find(& # 39；李.电流& # 39；)

.动画({ & # 39；身高& # 39；:'50px & # 39}，400，function(){

$(这个)。remove class(& # 39；当前& # 39；);

})

.查找(& # 39；.st _ thumbs _ wrapper & # 39)

.隐藏(200)

.andSelf()

.查找(& # 39；.st_link

span & # 39)

.addClass(& # 39；st _ arrow _ down & # 39)

.remove class(& # 39；st _ arrow _ up & # 39);

}

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

//当鼠标移动到菜单层时，会自动滚动。

功能

makeScrollable($outer，

$inner){

定义变量

额外的

=

800;

//获取菜单的宽度

定义变量

divWidth

=

$ outer . width()；

//移除滚动条

$outer.css({

溢出:

'隐藏& # 39；

});

//找到容器上的最后一张图片

定义变量

拉斯泰伦

=

$inner.find('img:last');$ inner . find(& # 39；img:last & # 39；);

$ outer . scroll left(0)；

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

$ outer . unbind(& # 39；鼠标移动& # 39；).绑定(& # 39；鼠标移动& # 39；，函数(e){

定义变量

集装箱宽度

=

lastElem[0]。偏左

lastElem.outerWidth()

2 *额外；

定义变量

左边的

=

(e.pageX

–

$outer.offset()。左)

*

(集装箱宽度-分隔宽度)

/

divWidth

–

号外；

$outer.scrollLeft(左)；

});

}

});

希望这篇文章对大家的jQuery编程有所帮助。

怎么用AJAX实现下拉滚动条动态加载数据？

我最近写过一个类似tokenbox的插件，是jQuery的，也是从数据库中把用户名读取出来，鼠标点击输入框时加载数据。但不像你这个10个10个加载。不知道你用的上不。