如何让【推荐】【反对】层跟随滚动条移动
今天下午有时间阅读【汤姆大叔的博客】，发现他的博客风格的确很专业，说起来也真惭愧啊，我现在终于得到了专职前端的岗位，自己博客风格还是那么土里吧唧的，这个和我工作十分不相称。不过我还是很喜欢自己现在博客的风格，很简洁，有点谷歌百度的风格，我不想大改自己博客的风格，但是如果发现别人博客里有好东西我就加到自己的博客里。比如【汤姆大叔的博客】里那个可以跟随滚动条一起滚动的【推荐】【反对】层就很不错。我已经将这段代码加入到了我自己博客里，这里我就讲讲我是怎么把这段代码找到，最后如何嵌入到自己博客里的。
我的工具是firefox+firebug插件。
首先打开【汤姆大叔的博客】的一篇博客：
http://www.cnblogs.com/TomXu/archive/2012/04/26/2443010.html
按图所示的步骤进行操作：
代码如下：
< 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 >
那么接下来怎么把脚本嵌入到我自己的博客里呢？
这个很简单了，按图操作了：
最后点击【保存】按钮，ok，现在我的博客里【推荐】【反对】层也会跟随滚动条移动~~~~~~~
分类: javascript
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于如何让【推荐】【反对】层跟随滚动条移动的详细内容...