具有滚动导航效果的全屏滚动相册示例的
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个加载。不知道你用的上不。
支付宝扫一扫
微信扫一扫
