zoukankan      html  css  js  c++  java
  • 博客园 漂浮快捷操作

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

  • 相关阅读:
    Linux自定义服务文件编写
    Ubuntu PPA方式安装vim
    ubuntu PPA使用指南
    ubuntu安装最新emacs
    Docker支持中文
    C#调用Go版DLL
    C#调用exe程序
    golang编写动态库供c#程序调用
    科学正在追赶中医,中医将变得时髦(转载)
    常见.NET功能代码汇总 (3)
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2416156.html
Copyright © 2011-2022 走看看