首页 / 脚本样式 / JavaScript / jQuery实现带滚动导航效果的全屏滚动相册实例

$（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）;}）;}}）;