【博客美化】09.评论带头像,且支持旋转
博客园美化相关文章目录:
【博客美化】01.推荐和反对炫酷样式
1.效果图
2.添加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.效果图 2.添加CSS代码 设置-页面 ...
- 博客园---博客美化汇总
转载自:https://www.cnblogs.com/WhiteTears/p/8824544.html 1.申请js权限 直接在设置里点击申请,审核较慢且通过率较低.因此可以向contact@cn ...
- 【博客美化】08.添加扩大/缩小浏览区域大小 按钮
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 【博客美化】01.推荐和反对炫酷样式
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
- 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【全网最全的博客美化系列教程】08.自定义地址栏Logo
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【全网最全的博客美化系列教程】02.添加QQ交谈链接
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
最新文章
- 原始数据极速上传NCBI SRA教程
- nginx实现对chunk请求支持
- Swift Tips - 在 Swift 中自定义下标访问
- 理想的教育是从父母自我改变开始
- mysql5.6源码编译_MySQL 5.6 源码编译安装
- 年轻讨厌而又美丽可爱的城市
- SpringBoot项目修改html后不即时编译
- php获取周几,php怎么获得星期几
- 《GPUPro》笔记
- Flutter进阶—平台插件
- 线程Thread(Java)
- 6月8日 Python处理PDF和Word文档常用的方法
- ubuntu中firefox图片有色差问题
- uni-app自定义配置安卓模拟器 - MuMu模拟器
- 「镁客·请讲」柏境数字张飞飞:做CG方向的VR视频,创造艺术和品质兼具的内容...
- Word 替换为空值时不管用怎么办 出现[只设格式]导致替换无效怎么办
- 移动端瀑布流/信息流布局以及交互
- 人力资源管理六大模块体系解读
- 每月与英国签证官网聊?
- 使用git中rebase遇到的坑二 could not apply xxxx
热门文章
- Elasticsearch--入门-_put post修改数据---全文检索引擎ElasticSearch工作笔记007
- Mybatis Plus简介_代码_以及文档地址_以及前置知识---Mybatis Plus工作笔记001
- SpringCloud学习笔记019---Windows 平台安装 MongoDB
- openoffice使用总结001---版本匹配问题unknown document format for file: E:\apache-tomcat-8.5.23\webapps\ZcnsDms\
- Android学习笔记---09_深入了解各种布局技术
- JPA零碎要点---JTA全局事物理解
- continue 与break 的区别
- php基本语法实验总结,PHP总结(一)基本语法内容
- java分布式(java反汇编)
- mysql 2003 10038_关于MySql10038错误的完美解决方法(三种)