博客園 漂浮快捷操作

正文

在看了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,'謝謝推薦！');推薦博文

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="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>

復制完后，點擊保存即可。

資料來源

圖標：http://www.easyicon.cn/iconsearch/iconset:symbolize-icons/

浮動：http://www.kaiwo123.com/down/js_267/

參照：http://www.cnblogs.com/Mainz/（非常喜歡Mainz的博客風格）