【部落格美化】評論帶頭像，且支援旋轉

摘要： 【部落格美化】評論帶頭像，且支援旋轉 好久沒有更新關於部落格園頁面美化的文章了，這一次主要是寫一下關於 評論帶頭像，且支援旋轉 的內容，希望各位小夥伴能夠喜歡！！！ 1.效果圖 2.新增CSS程式碼 設定-頁面定製CSS程式碼 .feedbackCon img...

【部落格美化】評論帶頭像，且支援旋轉

好久沒有更新關於部落格園頁面美化的文章了，這一次主要是寫一下關於 評論帶頭像，且支援旋轉 的內容，希望各位小夥伴能夠喜歡！！！

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檔案

檔案地址： ofollow,noindex" target="_blank">https://blog-static.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檔案

5：頁尾Html程式碼

引入第二步上傳的JavaScript檔案Comments.js：

<script type="text/javascript" src="http://files.cnblogs.com/files/自己的部落格名稱/Comments.js"></script>

總結：總的來說還是比較簡單的，希望能夠幫助到各位小夥伴！！