专栏首页Jackson0714【博客美化】09.评论带头像,且支持旋转

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    Jackson0714
  • JavaScrpit判断横竖屏

    Jackson0714
  • JavaScrpit判断横竖屏

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

    Jackson0714
  • 一文看尽2019全年AI技术突破

    最近,Analytics Vidhya发布了2019年AI技术回顾报告,总结了过去一年中,AI在不同技术领域取得的进展,并展望了2020年的新趋势。

    OpenCV学堂
  • 迪士尼新杀器来了!卡通机器人新专利曝光

    迪士尼乐园对不少人来说是假期必去的一个地方,除了各种有趣的游乐设施,与乐园中的卡通人物进行互动也是其中一项非常重要的内容,据统计,迪士尼乐园每天接待的人数超过 ...

    机器人网
  • 腾讯云怎么建网站-腾讯云建网站教程

    一台腾讯云服务器可以建多个网站,只要你的服务器配置足够高,就可以建很多。服务器的配置指的是CPU和内存,配置越高建的网站就越多。如果配置低,建的网站太多,服务器...

    秋风落叶
  • 如何使用Burp和Magisk在Android 7.0监测HTTPS流量

    在任何环境下的移动端安全审计中,肯定都会涉及到拦截HTTPS流量。通过向Android应用添加自定义的CA,我们就可以轻松完成HTTPS流量拦截了。但是对于A...

    FB客服
  • 基于STM32+LDC1000的循迹小车

    每年的TI杯电子设计竞赛都会出A题~G题共七个题,我们团队平时主要做控制的多,所以这次竞赛我们选择控制类题目——自动循迹小车。该题题目及要求如下:

    正念君
  • pl/sql中错误的异常处理 (r3笔记第15天)

    pl/sql中对于错误的处理是很重要的一个部分,就跟写程序中对于异常的处理一样。可能程序中正常的流程实现部分不是很复杂,但是对于各种可能发生的异常情况都需要面面...

    jeanron100

扫码关注云+社区

领取腾讯云代金券