【博客美化】09.评论带头像,且支持旋转

博客美化:

 1.效果图

2.添加CSS代码

设置-页面定制CSS代码

.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

.feedbackCon img {
border-radius: 40px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

3.上传JavaScript文件

文件地址:http://files.cnblogs.com/files/jackson0714/Comments.js

下面是参考农码一生的JavaScript脚本。

Comments.js

function customTimer(inpId, fn) {
    if ($(inpId).length) {
        fn();
    }
    else {
        var intervalId = setInterval(function () {
            if ($(inpId).length) {  //如果存在了
                clearInterval(intervalId);  // 则关闭定时器
                customTimer(inpId, fn);              //执行自身
            }
        }, 100);
    }
}
//添加 评论区的 形象照
function addImage() {
    var spen_html = "<span class='bot' ></span>\
                         <span class='top'></span>";
    $(".blog_comment_body").append(spen_html);

    $(".blog_comment_body").before("<div class='body_right' style='float: left;'><a target='_blank'><img  /></a></div>");
    var feedbackCon = $(".feedbackCon").addClass("clearfix");
    for (var i = 0; i < feedbackCon.length; i++) {
        var span = $(feedbackCon[i]).find("span:last")[0].innerHTML || "http://pic.cnitblog.com/face/sample_face.gif";
        $(feedbackCon[i]).find(".body_right img").attr("src", span);
        var href = $(feedbackCon[i]).parent().find(".comment_date").next().attr("href");
        $(feedbackCon[i]).find(".body_right a").attr("href", href);

    }
}

//页面加载完成是执行
$(function () {

 //添加 评论区的 形象照
    customTimer(".blog_comment_body", addImage);

    });

 4.引入JavaScript文件

页脚Html代码

引入第二步上传的JavaScript文件Comments.js:

<script type="text/javascript" src="http://files.cnblogs.com/files/自己的博客名称/Comments.js"></script>

作  者: Jackson0714 出  处:http://www.cnblogs.com/jackson0714/ 关于作者:专注于微软平台的项目开发。如有问题或建议,请多多赐教! 版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。 特此声明:所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误,共同进步。或者直接私信我 声援博主:您的鼓励是作者坚持原创和持续写作的最大动力!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客猴

爬取《Five Hundred Miles》在网易云音乐的所有评论

在使用 Ajax 技术加载数据的网站中, JavaScript 发起的 HTTP 请求通常需要带上参数,而且参数的值都是经过加密的。如果我们想利用网站的 RES...

10820
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

11820
来自专栏dotnet & java

WCF入门学习(1,2)

辞职之后当然是玩。玩了若干天的游戏,真的是没日没夜啊,但是玩的太坑,怒删游戏。话说上次玩还是在14年7月份。下次还是过年回家再和小伙伴一起玩。想到过年也就7天的...

12520
来自专栏数据小魔方

think-cell chart系列20——使用建议及附加功能

今天是think-cell chart系列收尾篇——使用建议及附加功能。 由于think-cell chart图表插件是office平台的第三方插件,而且图表...

53040
来自专栏带你撸出一手好代码

把需求变化带来的代码修改成本降至最低的一种方法

为解决工作中一些繁琐的问题, 写了一个GUI程序, 操作界面是这个样子的 ? 这个程序的实现起来并不是非常的繁琐, 但在界面的交互操作上, 也不仅仅只是展示数据...

35970
来自专栏纯洁的微笑

谈谈我与 Intellij IDEA 的故事

说到这款 IDEA,很早就想写一篇关于它的文章了,可不知从何处写起,刚好一位师弟问起我来,正好写一篇入门文章,本文的涉及的快捷键主要针对于 Windows系统「...

11720
来自专栏尾尾部落

把Safari当chrome用(插件篇)

主页:http://markdown-here.com 点评:在网页的编辑器中用markdown的语法输入内容,然后右击选择Markdown Toggle或者...

37520
来自专栏机器学习算法与Python学习

极力推荐的Chrome插件!

Momentum能给单调的Chorme首页披上一个漂亮的风景照,毕竟谷歌浏览器的页面打开是这样的。

16300
来自专栏软件开发

前端机试面试题

1、请实现“https://channel.jd.com/fashion.html”超值购部分内容。

71030
来自专栏黑泽君的专栏

浏览器内核(理解)

  浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

43220

扫码关注云+社区

领取腾讯云代金券