当前位置 > 首页 > 个人随笔 > 网页浮动工具条

网页浮动工具条

2010年05月22日   作者： Artcss     类别：个人随笔

1146 views | 发表评论

分享到: 百度 QQ空间 微博 豆瓣 人人 开心 QQ书签

前两天用jQuery写了个网页浮动工具条，主要效果如下：

1、自动判断浏览器宽度。

当浏览器窗口小于1024时，工具条会自动隐藏

支持浏览器窗口拖拽

2、当拖动浏览器窗口大小时，工具条位置也会相应调整，始终保持贴在网页主体内容右侧。

用到的javascript代码如下:

Download showBar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$(function(){
var name = $('#float_scroll'); //浮动工具条的ID
function showBar(time){
	setTimeout(function(){
		$(name).show();},time);
	}
function hideBar(time){
	setTimeout(function(){
		$(name).hide();},time);
}
$('.oClose').click(function(){
	$(name).hide();
		return false;
});
showBar(1000);
//hideBar(31000); //页面加载完毕多久后关闭工具条
var pageW = $(".edge").get(0).offsetWidth;//主体页面宽度;
function scrollBar(){
	var offset = $(window).height()/2 - $(name).height()/2 + $(document).scrollTop();
	var oLeft;
	if($(window).width() >= $(name).width()*2+pageW){
		oLeft = $(window).width()/2+pageW/2;
	}else if($(window).width() <= pageW){
		oLeft = pageW - $(name).width();
	}else{
		oLeft = $(window).width() - $(name).width();
	}
	$(name).animate({top:offset},{duration:200,queue:false});
	$(name).animate({left:oLeft},{duration:100,queue:false});
 
	$(".num").text($(window).width());
	$(".num2").text(oLeft);
}
scrollBar();
$(window).resize(scrollBar);
$(window).scroll(scrollBar);
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

相关博文

标签：

相关日志

给作者留言：