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


Posted in Javascript onJune 19, 2015

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

运行效果图如下:

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);
});
}
});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
js的对象与函数详解
Jan 21 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
基于canvasJS在PHP中制作动态图表
May 30 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
jquery实现的代替传统checkbox样式插件
Jun 19 #Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 #Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 #Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 #Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 #Javascript
使用AngularJS实现表单向导的方法
Jun 19 #Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 #Javascript
You might like
PHP中遇到的时区问题解决方法
2015/07/23 PHP
checkbox使用示例
2013/08/23 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
浅谈Python peewee 使用经验
2017/10/20 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人查摆剖析材料
2014/10/16 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
幼儿园中班教学反思
2016/03/03 职场文书