博客园 漂浮快捷操作
http://www.cnblogs.com/IT-Bear/archive/2012/03/23/2413948.html
正文
在看了 Mainz 的博客风格后，想要自己也弄上一个，于是就动手了。
尽管效果出来了，但是收藏、评论和推荐应该只在博文页出现，这里还没有做判断。
看了一下 Mainz 的代码有些地方还没看懂，需要研究一下。
另我的是1024×768小屏，在IE8和Chrome下测试是没有问题的。
推荐此文，是和好文要顶用的一样的链接不知道问什么没有效果。
;green_channel_success(this,'谢谢推荐！');
如果您那里出现了不兼容的问题请告诉我，谢谢。
怎么;前面半句不见了
代码分析
HTML
< div id ="divTool" >
< a href ="#top" title ="返回顶部" >
< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_db.png" width ="24" height ="24" />
</ a >
< a href ="http://www.cnblogs.com/IT-Bear/" title ="回到主页" >
< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_zy.png" width ="24" height ="24" />
</ a >
< a id ="green_channel_favorite" onclick ="AddToWz(cb_entryId);return false;" href ="javascript:void(0);" title ="收藏此文" >
< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_sc.png" width ="24" height ="24" />
</ a > < a href ='javascript:void(0)' onclick ='document.getElementById("commentform_title").scrollIntoView();' title ='发表评论' >< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_pl.png" width ="24" height ="24" />
</ a > < a href ="javascript:void(0);" id ="green_channel_digg" onclick =";green_channel_success(this,'谢谢推荐！');" title ="推荐此文" >< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_rj.png" width ="24" height ="24" />
</ a >
</ div >
备注：
cb_entryId博文IDcb_blogId博客ID
AddToWz(cb_entryId);收藏博文
;green_channel_success(this,'谢谢推荐！');推荐博文
JS
<script type="text/javascript">
// 绝对定位隐藏显示
function getScroll(id){
var obj = document.getElementById(id);
var timer = null ;
positionFixed(obj);
if (obj){
obj.style.display = 'none';
window.onscroll= function (){
getScrollTop() > 0 ? obj.style.display = "block" : obj.style.display = "none";
}
}
}
// 判断IE6
function positionFixed(obj){
var iE6 = !-[1,] && !window.XMLHttpRequest;
if (obj){
var top = obj.offsetTop;
if (iE6){
document.documentElement.style.textOverflow = "ellipsis";
obj.style.position = "absolute";
obj.style.setExpression("top", "eval(documentElement.scrollTop + " + top + ') + "px"');
}
}
}
// 获取滚动条Top
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
window.onload = function (){
getScroll('divTool');
};
</script>
使用方法
点击“管理”-“设置”
1.复制CSS代码
#divTool { width : 24px ; height : 200px ; right : 3px ; bottom : 5px ; cursor : pointer ; position : fixed ; _position : absolute ; display : none ; color : #FFFFFF }
#divTool img { border : 0px ; margin : 2px ;}
2.复制HTML+JS
< script type ="text/javascript" >
// 绝对定位隐藏显示
function getScroll(id){
var obj = document.getElementById(id);
var timer = null ;
positionFixed(obj);
if (obj){
obj.style.display = ' none ' ;
window.onscroll = function (){
getScrollTop() > 0 ? obj.style.display = " block " : obj.style.display = " none " ;
}
}
}
// 判断IE6
function positionFixed(obj){
var iE6 = !- [ 1 ,] && ! window.XMLHttpRequest;
if (obj){
var top = obj.offsetTop;
if (iE6){
document.documentElement.style.textOverflow = " ellipsis " ;
obj.style.position = " absolute " ;
obj.style.setExpression( " top " , " eval(documentElement.scrollTop + " + top + ' ) + "px" ' );
}
}
}
// 获取滚动条Top
function getScrollTop(){
return document.documentElement.scrollTop || document.body.scrollTop;
}
window.onload = function (){
getScroll( ' divTool ' );
};
</ script >
< div id ="divTool" >
< a href ="#top" title ="返回顶部" >
< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_db.png" width ="24" height ="24" />
</ a >
< a href ="http://www.cnblogs.com/IT-Bear/" title ="回到主页" >
< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_zy.png" width ="24" height ="24" />
</ a >
< a id ="green_channel_favorite" onclick ="AddToWz(cb_entryId);return false;" href ="javascript:void(0);" title ="收藏此文" >< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_sc.png" width ="24" height ="24" />
</ a >
< a href ='javascript:void(0)' onclick ='document.getElementById("commentform_title").scrollIntoView();' title ='发表评论' >< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_pl.png" width ="24" height ="24" />
</ a >
< a href ="javascript:void(0);" id ="green_channel_digg" onclick =";green_channel_success(this,'谢谢推荐！');" title ="推荐此文" >< img src ="http://images.cnblogs.com/cnblogs_com/IT-Bear/365886/o_rj.png" width ="24" height ="24" />
</ a >
</ div >
复制完后，点击保存即可。
资料来源
图标： http://www.easyicon.cn/iconsearch/iconset:symbolize-icons/
浮动： http://www.kaiwo123.com/down/js_267/
参照： http://www.cnblogs.com/Mainz/ （非常喜欢 Mainz 的博客风格）
作者： ITBear
出处： http://www.cnblogs.com/IT-Bear/
关于作者：初出茅庐。如有问题或建议，请多多赐教！
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
如有问题，可以通过 tangyuting2011@foxmail.com 联系我，非常感谢。
如果您觉得我的文章对您有所帮助，您觉得它值0.01元，请点击此处，我会继续努力的。
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息