【博客美化】09.評論帶頭像，且支持旋轉

博客園美化相關文章目錄：

【博客美化】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/
關於作者：專注於微軟平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角【推薦】一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！