Home >Web Front-end >JS Tutorial >jQuery implements full-screen scrolling photo album with scrolling navigation effect_jquery

jQuery implements full-screen scrolling photo album with scrolling navigation effect_jquery

WBOY
WBOYOriginal
2016-05-16 15:53:491722browse

The example in this article describes how jQuery implements a full-screen scrolling photo album with scrolling navigation effect. Share it with everyone for your reference. The details are as follows:

The operation effect diagram is as follows:

The main code is as follows:

$(function() {
//加载时的图片
var $loader= $('#st_loading');
//获取的ul元素
var $list= $('#st_nav');
//当前显示的图片
var $currImage = $('#st_main').children('img:first');
//加载当前的图片
//同时显示导航的项
$('<img>').load(function(){
$loader.hide();
$currImage.fadeIn(3000);
//滑出导航
setTimeout(function(){
$list.animate({'left':'0px'},500);
},
1000);
}).attr('src',$currImage.attr('src'));
//计算出将被显示的略缩图所在的div元素的宽度
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//每张略缩图占有180像素的宽度和3像素的间距(margin)
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//是这元素具有滚动性
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//点击菜单项目的时候(向上向下箭头切换)
//使略缩图的div层显示和隐藏当前的
//打开菜单(如果有的话)
$list.find('.st_arrow_down').live('click',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show(200);
});
$list.find('.st_arrow_up').live('click',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//点击略缩图,改变大的图片
$list.find('.st_thumbs img').bind('click',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//隐藏当前已经打开了的菜单的函数
function hideThumbs(){
$list.find('li.current')
 .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 = $outer.width();
//移除滚动条
$outer.css({
overflow: 'hidden'
});
//查找容器上的最后一张图片
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//当用户鼠标离开菜单的时候
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
$outer.scrollLeft(left);
});
}
});

I hope this article will be helpful to everyone’s jQuery programming.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn