轻松 3 步搞定,让你的 Solo 博客充满爱

本贴最后更新于 2822 天前,其中的信息可能已经时过境迁

效果如下:
1471589118820
1、首先要添加心形图标的 CSS
访问这个地址,填写你的邮箱
http://fontawesome.io/get-started/
然后你会收到它发来的一个 CDN 链接:
1471589263375
把这个链接粘贴到 SOLO 管理后台的 HTML head 中:
1471589356088
2、添加 Jquery 的 CDN:

<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>

3、添加代码:

<script> 
  // mouse click special effects
    var click_cnt=0;
    jQuery(document).ready(function($) {
        $("html").click(function(e) {
            var n=18;
            //var $i=$("<b></b>").text("+"+n);
            var $i;
            click_cnt++;
            if(click_cnt==10) {
                $i=$("<b></b>").text("OωO");
            } else if(click_cnt==20) {
                $i=$("<b></b>").text("(๑•́ ∀ •̀๑)");
            } else if(click_cnt==30) {
                $i=$("<b></b>").text("(๑•́ ₃ •̀๑)");
            } else if(click_cnt==40) {
                $i=$("<b></b>").text("(๑•̀_•́๑)");
            } else if(click_cnt==50) {
                $i=$("<b></b>").text("( ̄へ ̄)");
            } else if(click_cnt==60) {
                $i=$("<b></b>").text("(╯°口°)╯(┴—┴");
            } else if(click_cnt==70) {
                $i=$("<b></b>").text("૮( ᵒ̌皿ᵒ̌ )ა");
            } else if(click_cnt==80) {
                $i=$("<b></b>").text("╮(。>口<。)╭");
            } else if(click_cnt==90) {
                $i=$("<b></b>").text("( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃");
            } else if(click_cnt>=100 && click_cnt<=105) {
                $i=$("<b></b>").text("(ꐦ°᷄д°᷅)");
            } else {
                $i=$("<i class='fa fa-heart'></i>");
                n=Math.round(Math.random()*14+6)
            }
            var x=e.pageX,y=e.pageY;
            $i.css({
                "z-index":9999,
                "top":y-20,
                "left":x,
                "position":"absolute",
                "color":"#E94F06",
                "font-size":n,
                "-moz-user-select": "none",
                "-webkit-user-select": "none",
                "-ms-user-select": "none"
            });
            $("body").append($i);
            $i.animate(
                {"top":y-180,"opacity":0},
                1500,
                function(){$i.remove();}
            );
            //e.stopPropagation();
        });
    });
</script>

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • relyn
    作者

    @Vanessa 对,可以直接用:♥

    &hearts;
    &heartsuit;
    

    感谢 V 大赐教哈哈

  • 其他回帖
  • huiyadanli

    (๑•́ ₃ •̀๑) 原作者我也不知道是谁,我在 @DIYgod 这位大神的博客圈子中翻看友情链接的时候看到有几个博客用这几行代码的(很多人都在互相模仿呐),原来的效果是 + 随机数字 的样式,我把它修改成随机大小的爱心,顺便加了几个表情。。。

    啊喂,这么少女心的东西用在博客和论坛上真的好么。。。我的本意是搞个网站娘。。。

  • huiyadanli

    也有人遇到和我一样的问题,阻止事件冒泡这句搞不懂,直接给注释了

    //e.stopPropagation();
    
  • 谢谢分享啦,这段代码好流行....

  • 查看全部回帖
relyn
永远相信美好的事情即将发生 福州

推荐标签 标签

  • LeetCode

    LeetCode(力扣)是一个全球极客挚爱的高质量技术成长平台,想要学习和提升专业能力从这里开始,充足技术干货等你来啃,轻松拿下 Dream Offer!

    209 引用 • 72 回帖 • 1 关注
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    5 引用 • 15 回帖 • 214 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    536 引用 • 672 回帖 • 1 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 2 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 32 关注
  • 安装

    你若安好,便是晴天。

    130 引用 • 1184 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 9 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    165 引用 • 1460 回帖 • 1 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖 • 2 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 108 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    123 引用 • 168 回帖
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    83 引用 • 165 回帖 • 41 关注
  • 导航

    各种网址链接、内容导航。

    37 引用 • 168 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 390 回帖
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    70 引用 • 532 回帖 • 718 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 601 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 24 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 544 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 7 关注
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    103 引用 • 126 回帖 • 445 关注
  • 分享

    有什么新发现就分享给大家吧!

    242 引用 • 1746 回帖 • 3 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖 • 1 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    16 引用 • 53 回帖 • 125 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 6 关注