jQuery实现带滚动导航效果的全屏滚动相册实例

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

运行效果图如下：

主要代码如下：

$(function() {//加载时的图片var $ loader=$(' # ST _ loading ')；//获取的保险商实验所元素var $ list=$(' # ST _ nav ')；//当前显示的图片var $currImage=$('#st_main ').儿童(' img : first ')；//加载当前的图片//同时显示导航的项$('img ').load(function(){ $ loader。hide()；$ currimage。淡入(3000)；//滑出导航setTimeout(函数(){ $ list。动画({ ' left ' : ' 0px ' }，500)；},1000);}).attr('src '，$ Currimage。attr(' src ')；//计算出将被显示的略缩图所在的差异元素的宽度build thumbs()；函数build thumbs(){ $ list。儿童('李。专辑').每个(function(){ var $ elem=$(this)；var $thumbs_wrapper=$elem.find(' .ST _ thumbs _ wrapper’)；var $ thumbs=$ thumbs _ wrapper。儿童(' : first ')；//每张略缩图占有180像素的宽度和3像素的间距（边距)var FinlW=$ thumbs。查找(' img ').长度* 183;$thumbs.css('width '，FinlW ' px ')；//是这元素具有滚动性制作卷轴($ thumbs _ wrapper，$ thumbs)；});}//点击菜单项目的时候（向上向下箭头切换)//使略缩图的差异层显示和隐藏当前的//打开菜单（如果有的话)$list.find(' .ST _ arrow _ down’).live('click '，function(){ var $ this=$(this)；hidemings()；$this.addClass('st_arrow_up ').移除CLaSS(' ST _ arrow _ down ')；var $ elem=$ this。近一点('李')；$elem.addClass('当前').动画({'height':'170px'}，200)；var $ thumbs _ wrapper=$ this。parent().next()；$ thumbs _ wrapper。演出(200场)；});$list.find(' .ST _ arrow _ up’).live('click '，function(){ var $ this=$(this)；$this.addClass('st_arrow_down ').remove CLaSS(' ST _ arrow _ up ')；hidemings()；});//点击略缩图，改变大的图片$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 ').儿童(' img : first ')；这个。在($ currImage)前插入；$ loader。hide()；$currImage.fadeOut(2000，function(){$(this)).移除();});}).attr('src '，$ this。attr(' alt ')；}).bind('mouseenter '，function(){$(this).停止()。动画({ '不透明度' : ' 1 ' });}).bind('mouseleave '，function(){$(this).停止()。动画({ '不透明度' : ' 0.7 ' });});//隐藏当前已经打开了的菜单的函数函数隐藏拇指(){$list.find('li.current ').动画({'height':'50px'}，400，function(){$(this).removeClass(“”当前');}) .查找('。ST _ thumbs _ wrapper’).隐藏(200)。andSelf().查找('。ST _ link span’).addClass('st_arrow_down ').remove CLaSS(' ST _ arrow _ up ')；}//是当前的略缩图差异层滚动//当鼠标移至菜单层的时候会自动地进行滚动函数makescroll($ outer，$ inner){ var extra=800；//获取菜单的宽度var divWidth=$ outer。宽度()；//移除滚动条外面。CSS({溢出： '隐藏' })；//查找容器上的最后一张图片var lastElem=$ inner。find(' img : last ')；外面。scroll ft(0)；//当用户鼠标离开菜单的时候$outer.unbind('mousemove ').绑定(' mousemove '，函数{ var containerWidth=lastElem[0].offsetLeft lastelem。out width()2 * extra；var left=(e.pageX - $outer.offset().左)*(containerWidth-divWidth)/divWidth-extra；$ outer.scrollLeft(左);});}});希望本文所述对大家的jQuery程序设计有所帮助。