zoukankan      html  css  js  c++  java
  • 打造浮动推荐框

    最近想把博客改改: 1. 推荐框固定在页面右下角; 2. javascript代码可以直接运行看效果;

    这篇说说推荐框固定的事, 其实这个有好多例子, 我看了看 这个人的比较有意思, 参考了一些代码, 我做的效果就看右下角.

      转载请注明出处 http://www.cnblogs.com/zaiyuzhong/p/float-digg.html

    推荐框的id是div_digg.

    首先是css, 没什么好说的自己找吧. (非博客园的网站看到了找到博客园的链接)

    其实把css贴在后台管理的页面定制css里就初步满足要求了, 但是仅仅是这样那就不用写博客了.

    我也想要能加关注, 能调到评论能回顶部的按钮, 后两个好说:

    $('#div_digg').append('<div><a onclick="javascript:document.getElementById("tbCommentBody").focus();" href="javascript:void(0);" style="font-weight: bold; padding-left: 5px;">快速评论</a>&nbsp;&nbsp;<a href="#top" style="font-weight: bold; padding-left: 5px;">返回顶部</a></div>');

    哦, 添加这个需要先申请js权限, 样式自己调整吧.(博客园有引用jQuery库, 无需自己再添加)

    下面说说加关注怎么弄上去:

    查看页面代码发现加关注的js方法c_follow(); 我又不想再直接添加a标签了, 而是把 #author_profile 层里的dom用上:

    1 一堆代码

    just kidding. 总之找不到 #author_profile_detail . 研究发现这块是异步加载的, 做个定时器吧.

    十几分钟过去了~

    中间遇见了一个兼容性问题: remove()有兼容问题, 改为removeChild().
    还发现在IE下, 把代码添加到window.onload事件中会导致很长时间之后才执行(想到在哪看过Chrome和IE在onload上的区别), 遂改为$('#blog-comments-placeholder').load
    //吐槽: 前天抢票装了个360抢票专版, 今天为了测兼容性打开了好多天没用的IE, 发现主页变成了 duba(其余部分忘记了), 还不让改, 囧~ 360浏览器卸了就好了, 再囧.

    好了, 实际代码和上面有点出入. 另外我把#author_profile隐藏了. //对于不能跳转的<a>, 我觉得还是onclick事件最后加上'return false;'阻止跳转, href="#"这样写比较好.

    你没看见代码? 自行F12.

    加关注那块可能有问题, 因为博客园这块是异步修改的, 如果是刷新的话就没问题了. //想找人测测又怕被说是骗关注的T_T

  • 相关阅读:
    PATA 1071 Speech Patterns.
    PATA 1027 Colors In Mars
    PATB 1038. 统计同成绩学生(20)
    1036. 跟奥巴马一起编程(15)
    PATA 1036. Boys vs Girls (25)
    PATA 1006. Sign In and Sign Out (25)
    读取web工程目录之外的图片并显示
    DOS命令
    java连接oracle集群
    servlet
  • 原文地址:https://www.cnblogs.com/zaiyuzhong/p/float-digg.html
Copyright © 2011-2022 走看看