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

Posted 2020-08-28 7年一线互联网经验，超爱图解底层原理，全栈一枚

博客美化 评论区带用户头像，且支持头像旋转

博客园美化相关文章目录：

【博客美化】01.推荐和反对炫酷样式

【博客美化】02.公告栏显示个性化时间

【博客美化】03.分享按钮

【博客美化】04.自定义地址栏logo

【博客美化】05.添加GitHub链接

【博客美化】06.添加QQ交谈链接

【博客美化】07.添加打赏按钮

【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮

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

【博客美化】10.图片预览放大

 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/
关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是作者坚持原创和持续写作的最大动力！