jquery自动滚动代码(jquery 滚动条)
admin 发布:2022-12-19 19:34 151
本篇文章给大家谈谈jquery自动滚动代码,以及jquery 滚动条对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
- 1、jquery 拖动滚动条时悬浮条跟随滚动代码求网友指点
- 2、jquery如何获取元素的滚动条高度等实现代码
- 3、怎么在这个JQ轮播上加自动滚动
- 4、JQuery 实现在同一页面锚点链接之间的平滑滚动
- 5、jQuery实现带滚动导航效果的全屏滚动相册实例
jquery 拖动滚动条时悬浮条跟随滚动代码求网友指点
给你个思路吧:
offset().top 悬浮窗在页面没滚动的时候与页面顶部的距离,这个距离只取了一次所以这个距离从开始就始终没变。
$(window).scrollTop() 是页面已经滚动的距离(是跟随你滚动不断变动的),就是你滚动条往下滚动的距离(页面可是区域顶端与原页面真实顶端的距离)
当页面滚动的时候触发函数$(window).scroll
然而悬浮窗又要保持页面打开时候的位置,那显然就是
悬浮窗原始与顶部距离+页面已经滚动过的距离;
jquery如何获取元素的滚动条高度等实现代码
主要功能:
获取浏览器显示区域(可视区域)的高度
:
$(window).height();
获取浏览器显示区域(可视区域)的宽度
:
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度
:
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度
(即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度
:
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
//返回当前页面高度
function
pageHeight(){
if($.browser.msie){
return
document.compatMode
==
"CSS1Compat"?
document.documentElement.clientHeight
:
document.body.clientHeight;
}else{
return
self.innerHeight;
}
};
//返回当前页面宽度
function
pageWidth(){
if($.browser.msie){
return
document.compatMode
==
"CSS1Compat"?
document.documentElement.clientWidth
:
document.body.clientWidth;
}else{
return
self.innerWidth;
}
};
以下是其它网友的补充:
获取浏览器显示区域的高度
:
$(window).height();
获取浏览器显示区域的宽度
:$(window).width();
获取页面的文档高度
:$(document).height();
获取页面的文档宽度
:$(document).width();
获取滚动条到顶部的垂直高度
:$(document).scrollTop();
获取滚动条到左边的垂直宽度
:$(document).scrollLeft();
计算元素位置和偏移量:$(id).offset();
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含
top和left两个属性。
offset(options,
results)
options.relativeTo指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll是否把
滚动条计算在内,默认TRUE
options.padding是否把padding计算在内,默认false
options.margin
是否把margin计算在内,默认true
options.border是否把边框计算在内,默认true
子页面控制父页面:
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;
怎么在这个JQ轮播上加自动滚动
看代码的格式是使用的jquery superslide插件,直接添加一个autoPlay:true参数就行了; JS部分的修改如下:
!-- 滚动图片 --
script type="text/javascript"
jQuery(".picScroll").slide({
mainCell:"ul",
effect:"leftLoop",
vis:4,
scroll:2,
autoPage:true,
switchLoad:"_src",
autoPlay:true
});
/script
JQuery 实现在同一页面锚点链接之间的平滑滚动
web开发前端一直用JQuery
,真正接触了才体会到,JQuery
原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替
JS
的,统统给用上了。
从
JQuery
引入今天的正题,用
JQuery
实现锚点链接之间的平滑滚动。以前介绍过一个用
JS
实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是
JS
代码相对来说比较冗长,现在好了,只要已经加载了
JQuery,我们就可以用较为简短的代码实现相同的效果。
使用方法如下:
1、载入
JQuery
库;
2、关键代码:
$(document).ready(function()
{
$('a[href*=#]').click(function()
{
if
(location.pathname.replace(/^\//,
'')
==
this.pathname.replace(/^\//,
'')
location.hostname
==
this.hostname)
{
var
$target
=
$(this.hash);
$target
=
$target.length
$target
||
$('[name='
+
this.hash.slice(1)
+
']');
if
($target.length)
{
var
targetOffset
=
$target.offset().top;
$('html,body').animate({
scrollTop:
targetOffset
},
1000);
return
false;
}
}
});
});
还是再要强调一下加载的顺序,先引用JQuery
类库。顺便说一下,经测试,该滚动效果在各浏览器下都兼容适用,唯有在
Opera
下表现有点怪异,还有待改进。
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程序设计有所帮助。
jquery自动滚动代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于jquery 滚动条、jquery自动滚动代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:简单登录系统asp源代码的简单介绍
- 下一篇:报备系统源代码(备案系统源码)
相关推荐
- 04-28免费的手机端设计代码(手机端编写代码)[20240428更新]
- 04-28asp测试代码怎么写(ASP测试)[20240428更新]
- 04-28网页循环滚动代码下载(div循环滚动)[20240428更新]
- 04-28北京时间网页代码(中国北京时间代码)[20240428更新]
- 04-28向左滚动js特效代码(js文字向左滚动)[20240428更新]
- 04-28网页页尾代码(网页制作尾部)[20240428更新]
- 04-28网站背景音乐自动播放代码(html背景音乐自动播放代码)[20240428更新]
- 04-28推箱子html代码(推箱子小游戏的代码)[20240428更新]
- 04-28手机版在线留言asp代码(asp手机网站源码)[20240428更新]
- 04-28淘宝js轮播代码(淘宝轮播图代码)[20240428更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接