如何让【推荐】【反对】层跟随滚动条移动

今天下午有时间阅读【汤姆大叔的博客】，发现他的博客风格的确很专业，说起来也真惭愧啊，我现在终于得到了专职前端的岗位，自己博客风格还是那么土里吧唧的，这个和我工作十分不相称。不过我还是很喜欢自己现在博客的风格，很简洁，有点谷歌百度的风格，我不想大改自己博客的风格，但是如果发现别人博客里有好东西我就加到自己的博客里。比如【汤姆大叔的博客】里那个可以跟随滚动条一起滚动的【推荐】【反对】层就很不错。我已经将这段代码加入到了我自己博客里，这里我就讲讲我是怎么把这段代码找到，最后如何嵌入到自己博客里的。

　　我的工具是firefox+firebug插件。

　　首先打开【汤姆大叔的博客】的一篇博客：

http://www.cnblogs.com/TomXu/archive/2012/04/26/2443010.html

　　

　　按图所示的步骤进行操作：

图1-1

图1-2

图1-3

代码如下：

<div style="position: fixed; right: 0px; bottom: 0px; z-index: 10; background-color: white; margin: 10px; padding: 10px; border: 1px solid rgb(204, 204, 204);" id="div_digg">                                        
    <div onclick="" class="diggit"> 
        <span id="digg_count" class="diggnum">8</span>
    </div>
    <div onclick="" class="buryit"> 
        <span id="bury_count" class="burynum">2</span>
    </div>
    <div class="clear"></div>    
    <div id="digg_tips" class="diggword">(请您对文章做出评价)</div>    
</div>

作为比较，我用同样的方式取到我页面里相同层的代码：

<div style="" id="div_digg">                                        
    <div onclick="" class="diggit"> 
        <span id="digg_count" class="diggnum">15</span>
    </div>
    <div onclick="" class="buryit"> 
        <span id="bury_count" class="burynum">2</span>
    </div>
    <div class="clear"></div>    
    <div id="digg_tips" class="diggword">(请您对文章做出评价)</div>    
</div>

我们发现大叔的博客里的div上多了style样式，但是这个div肯定是博客园预先就做好的，大叔不可能直接改源码将这些样式加到元素上，一定是交给了js脚本实现的，于是我查看了大叔博客里页面的源码，通过div里的id值div_digg查找，终于发现了js脚本了，脚本内容如下：

<script type="text/javascript">
    $(document).ready(function () {
        $("body").prepend($("#div_digg").css({
            "position": "fixed", "right": "0px", "bottom": "0px", "z-index": "10", "background-color": "white", "margin": "10px", "padding": "10px", "border": "1px solid #cccccc"
        }));
      $(".cnblogs_code_toolbar").hide();
    });
</script> 

那么接下来怎么把脚本嵌入到我自己的博客里呢？

这个很简单了，按图操作了：

图1-4

图1-5

图1-6

最后点击【保存】按钮，ok，现在我的博客里【推荐】【反对】层也会跟随滚动条移动~~~~~~~

分类: javascript