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 相关文章推荐
namespace.js Javascript的命名空间库
Oct 11 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
vue项目中实现缓存的最佳方案详解
Jul 11 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
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
业余方法DIY电子管FM收音机
2021/03/02 无线电
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Python sys.path详细介绍
2013/10/17 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
机动车交通事故协议书
2015/01/29 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python