【博客美化】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 条评论
登录 后参与评论

相关文章

来自专栏小曾

.Net高级进阶,在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码?

本文将通过场景例子演示,来通俗易懂的讲解在复杂的业务逻辑下,如何以最简练的代码,最直观的编写事务代码。

712
来自专栏更流畅、简洁的软件开发方式

三层架构之我见 —— 不同于您见过的三层架构。

       我从02年开始了编程的工作,开始接触一些简单的网站,下半年写了个小的自助建站程序(asp和asp.net),比较简陋没有使用。03年开始正式做网站...

1717
来自专栏微信终端开发团队的专栏

MMKV for Android 多进程设计与实现

MMKV 是基于 mmap 内存映射的移动端通用 key-value 组件,底层序列化/反序列化使用 protobuf 实现,性能高,稳定性强。从 2015 ...

931
来自专栏Golang语言社区

golang实现基于redis和consul的可水平扩展的排行榜服务范例

本文的完整代码见 https://github.com/changjixiong/goNotes/tree/master/redisnote ,https://...

3726
来自专栏编程

Pwnhub 第一次线下沙龙竞赛Web题解析

Pwnhub在8月12日举办了第一次线下沙龙,我也出了两道Web相关的题目,其中涉及好几个知识点,这里说一下。 # 《国家保卫者》 国家保卫者是一道MISC题目...

1798
来自专栏Web 开发

如何把捏前端模板颗粒度

今晚看到一篇博文,其原文是讲AngularJS的模板的,但觉得该作者讲的很多思路,不仅仅是AngularJS适用。凡是想在前端进行模板组织的,都可借鉴,故写下读...

610
来自专栏FreeBuf

一名代码审计新手的实战经历与感悟

blueCMS介绍 个人认为,作为一个要入门代码审计的人,审计流程应该从简单到困难,逐步提升。因此我建议大家的审计流程为——DVWA——blueCMS——其他小...

3466
来自专栏微服务生态

Akka简单的性能测试

这种方案是采用MQ作为中间的媒介,在服务端采用线程池异步处理任务,处理完成之后将结果发送到MQ中,客户端采用侦听的方式得到结果继续进行处理。

771
来自专栏技术分享

.NET项目开发—浅谈面向接口编程、可测试性、单元测试、迭代重构(项目小结)

阅读目录: 1.开篇介绍 2.迭代测试、重构(强制性面向接口编程,要求代码具有可测试性) 2.1.面向接口编程的两个设计误区 2.1.1.接口的依赖倒置 ...

1929
来自专栏极客慕白的成长之路

React . js 是怎样炼成的?

内容整理自 2014 年的 OSCON - React Architecture by vjeux(https://speakerdeck.com/vjeux/...

794

扫码关注云+社区