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

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

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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/jackson0714/p/BeautifyBlog_09.html

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

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

    [博客美化]评论带头像,且支持旋转 好久没有更新关于博客园页面美化的文章了,这一次主要是写一下关于评论带头像,且支持旋转的内容,希望各位小伙伴能够喜欢!!! 1.效果图 2.添加CSS代码 设置-页面 ...

  2. 博客园---博客美化汇总

    转载自:https://www.cnblogs.com/WhiteTears/p/8824544.html 1.申请js权限 直接在设置里点击申请,审核较慢且通过率较低.因此可以向contact@cn ...

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

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

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

    博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...

  5. 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  6. 【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  7. 【全网最全的博客美化系列教程】08.自定义地址栏Logo

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  8. 【全网最全的博客美化系列教程】02.添加QQ交谈链接

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

  9. 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠

    全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...

最新文章

  1. 原始数据极速上传NCBI SRA教程
  2. nginx实现对chunk请求支持
  3. Swift Tips - 在 Swift 中自定义下标访问
  4. 理想的教育是从父母自我改变开始
  5. mysql5.6源码编译_MySQL 5.6 源码编译安装
  6. 年轻讨厌而又美丽可爱的城市
  7. SpringBoot项目修改html后不即时编译
  8. php获取周几,php怎么获得星期几
  9. 《GPUPro》笔记
  10. Flutter进阶—平台插件
  11. 线程Thread(Java)
  12. 6月8日 Python处理PDF和Word文档常用的方法
  13. ubuntu中firefox图片有色差问题
  14. uni-app自定义配置安卓模拟器 - MuMu模拟器
  15. 「镁客·请讲」柏境数字张飞飞:做CG方向的VR视频,创造艺术和品质兼具的内容...
  16. Word 替换为空值时不管用怎么办 出现[只设格式]导致替换无效怎么办
  17. 移动端瀑布流/信息流布局以及交互
  18. 人力资源管理六大模块体系解读
  19. 每月与英国签证官网聊?
  20. 使用git中rebase遇到的坑二 could not apply xxxx

热门文章

  1. Elasticsearch--入门-_put post修改数据---全文检索引擎ElasticSearch工作笔记007
  2. Mybatis Plus简介_代码_以及文档地址_以及前置知识---Mybatis Plus工作笔记001
  3. SpringCloud学习笔记019---Windows 平台安装 MongoDB
  4. openoffice使用总结001---版本匹配问题unknown document format for file: E:\apache-tomcat-8.5.23\webapps\ZcnsDms\
  5. Android学习笔记---09_深入了解各种布局技术
  6. JPA零碎要点---JTA全局事物理解
  7. continue 与break 的区别
  8. php基本语法实验总结,PHP总结(一)基本语法内容
  9. java分布式(java反汇编)
  10. mysql 2003 10038_关于MySql10038错误的完美解决方法(三种)