2007年1月25日星期四

blogger:Shalafi Vos的固定导航栏位置以及滑动伸缩效果

昨天看到成人童话世界的Shalafi Vos作出了一个很酷的滑动伸缩栏效果,就要他赶快分享一下。今天他果然把文章写出来了。想学习的赶快去看看吧~~

点击这里察看原文

不过先说明,这个hack似乎只在1024*768或以上的分辨率有较好的效果。而且三个脚本文件真的很大,分别有63.3K,33K,3k,加起来将近100k了等于一个小型网站的体积了。会严重影响博客打开速度。用不用大家自己测试后决定~~


补充:那个最大的脚本和我前面的文章ajax标签使用的脚本是一样的,所以使用了那个脚本就不必使用http://jscripts.ning.com/id/1093361 这个脚本。


原文备份:
这是无意中发现的,一个很酷的效果,我在blogger-hacked看到了他把CC许可固定在浏览器的最前端,同时按on/off还会滑动,当时我就想如果把这效果用到导航栏中,不但实用,还能够节省大量空间,通过查看代码,我终于找到了方法,实际上要实现并不困难(因为最难的JS脚本老外都帮我们实现了 ;-)),而且理论上不但blogger,任何网页都可以使用这个方法。

固定导航栏
我们以#footer为例,你可以使用到任何侧边栏上,这里除了固定位置以外,还使用背景透明,修改对应的CSS样式


#footer {
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
}


滑动效果

添加以下连接到你的head中


<script src='http://jscripts.ning.com/id/1093361' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093360' type='text/javascript'></script>
<script src='http://jscripts.ning.com/id/1093362' type='text/javascript'></script>


接下来添加开关导航栏的按钮


<div align='center' ><a onclick='new Effect.toggle("自定义ID", "blind");'><b>打开/关闭导航栏</b></a></div>


最后把你需要隐藏的部分放到下面的DIV中


<div id='自定义ID' style='display:none;'>


注意“自定义ID”必须和上面的导航栏按钮相同

几点使用经验:

1.注意作用域,举个例子,如果你在修改代码中添加了隐藏导航栏的代码,那么开关按钮也必须添加到修改代码当中,如果把开关添加到了widget是无效的。

也就是说,代码的位置必须保持一致,要么都放到修改代码,要么都放到widget当中。

而且你还可以把代码放到不同widget中,什么意思呢?无比说你把开关添加到widget html1,然后把隐藏的添加到widght html2依然是有效果的。

2.注意用户体验,考虑到虽然很多访问者都用上了17寸以上的显示器,但不是每个人都在用液晶的,统计数据得知,80%以上的人都是使用1024*768的分辨率,我们就必须考虑到页面大小的问题,我使用的分辨率是1280*1024,我的导航栏完全打开以后占用了70%的浏览窗口,如果是1024的话,就会完全占用了105%!!,要命的是,多出的5%都移动到了浏览窗口之上,而这个导航栏是没有滚动条的。。。。也就是说这5%的内容永远都看不到,而刚好我的开关就在这5%中,1024的话,导航栏根本就关不上。

所以我的解决方法是在最底部再多增加一个开关,你也可以增加滚动条,但导航栏过高绝对不是个好的用户体验。


0 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆