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