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