博客园漂浮快捷操作

正文

在看了Mainz的博客风格后，想要自己也弄上一个，于是就动手了。

尽管效果出来了，但是收藏、评论和推荐应该只在博文页出现，这里还没有做判断。

看了一下Mainz的代码有些地方还没看懂，需要研究一下。

另我的是1024×768小屏，在IE8和Chrome下测试是没有问题的。

推荐此文，是和好文要顶用的一样的链接不知道问什么没有效果。

DiggIt(cb_entryId,cb_blogId,1);green_channel_success(this,'谢谢推荐！');

如果您那里出现了不兼容的问题请告诉我，谢谢。

怎么DiggIt(cb_entryId,cb_blogId,1);前面半句不见了

代码分析

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="DiggIt(cb_entryId,cb_blogId,1);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);收藏博文

DiggIt(cb_entryId,cb_blogId,1);green_channel_success(this,'谢谢推荐！');推荐博文

<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";        }    }}//判断IE6function 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"');        }    }}//获取滚动条Topfunction 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";        }    }}//判断IE6function 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"');        }    }}//获取滚动条Topfunction 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="DiggIt(cb_entryId,cb_blogId,1);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>