博客园 漂浮快捷操作

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元，请点击此处，我会继续努力的。