jquery滚动导航,jquery 滚动插件
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册。分享给大家供大家参考。具体如下：
成都创新互联：2013年至今为各行业开拓出企业自己的“网站建设”服务，为上千多家公司企业提供了专业的成都做网站、网站建设、外贸营销网站建设、网页设计和网站推广服务， 按需设计网站由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。
运行效果图如下：
主要代码如下：
$(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程序设计有所帮助。
jquery怎么做导航条随滚动条的滚动而滚动，不是固定的那种。
这个用CSS让导航固定就可以了，
#qq {
position:fixed; /* 固定位置 ie6不支持该属性 */
top:0; /* 导航栏距离顶端为0像素 */
/*ie6下样式，加下划线表示只针对ie6 的hack (可百度 css hack百度百科)*/
_position:absolute; /* 把导航栏位置定义为绝对位置，这句是关键1 */
_top:expression(eval(document.documentElement.scrollTop)); /* 把导航栏位置放在浏览器垂直滚动条的顶端，这句是关键2 */
overflow:auto;
z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
}
*/
基于jquery的手机触控左右滑动拖动导航菜单
一个简单的解决方案：顶端固定一个DIV作为导航容器，该DIV左端和右端分别用DIV模拟向左和向右的按钮，中间区域呈现导航按钮，计算当前位置，用模拟的按钮控制左右滚动。
另，你说的手机端用手指滑动，在 HTML 中是由浏览器根据手势触控事件来支持的，jQuery 超越不了浏览器对 JS 的支持，因为 jQuery 就是 JS 的程序包。如果使用 Mouse 事件来实现，也不是不可以，因为手势触控的本质无非还是 Mouse 事件同源的衍生计算。费老鼻子劲使用 Mouse 事假实现一个有加速减速效果的导航滑动，不经济。供参考。
用jquery来设置网页导航栏向下滚动时隐藏，向上滚动时显示的代码
script type="text/javascript" src=""/script
script
(function() {
new Headroom(document.querySelector("#nav-scroll"), { //这里的nav-scroll改为你的导航栏的id或class
offset : 5, // 在元素没有固定之前，垂直方向的偏移量（以px为单位）
tolerance: 5, // scroll tolerance in px before state changes
classes: {
initial: "animated", // 当元素初始化后所设置的class
pinned: "slideUp", // 向上滚动时设置的class
unpinned: "slideDown" // 向下滚动时所设置的class
}
}).init();
}());
/script
然后，加上样式就可以了：
.animated {position: fixed;top: 0;left: 0;right: 0;transition: all .2s ease-in-out;}
.animated .slideDown {top: -100px;}
.animated .slideUp {top: 0;}
jQuery方法。页面滚动到某一栏目,这个栏目的导航显示怎么写
思路是获取页面滚动的位置 .scrollTop(),结合div的位置来判断不同导航条的显示
jquery滚动条导航栏怎么固定
其实所谓的网页滚动条固定就是一个简单的判断
function scrollLis(){
var toTop = offs.top-$(window).scrollTop();
if(toTop==0||toTop0){
if(!$('.fixed-div').hasClass('add-fixed-div'))$('.fixed-div').addClass('add-fixed-div');
}else{
$('.fixed-div').removeClass('add-fixed-div');
};
};
var offs=$('.fixed-div').offset();
$(window).scroll(function(){
scrollLis();
});
我解释下代码：
在你的nav class 同时加入.fixed-div
然后在css样式表中add-fixed-div写上绝对定位
scrollLis 滚到.fixed-div的时候就会添加一个add-fixed-div 而add-fixed-div他里面有一个绝对定位的css （position:fixed）这样就完成了导航固定了
在解释下
var offs=$('.fixed-div').offset();
$(window).scroll(function(){
scrollLis();
});
这个是判断回滚的时候取消固定
文章名称：jquery滚动导航,jquery 滚动插件
文章起源：http://6mz.cn/article/dseocdi.html