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

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

效果如下:
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>

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 谢谢分享啦,这段代码好流行....

  • 应该不用引 font-icon, 用 HTML Character Entities 简单的就可以了。

  • relyn
    作者

    @Vanessa 对,可以直接用:♥

    &hearts;
    &heartsuit;
    

    感谢 V 大赐教哈哈

  • huiyadanli

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

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

  • huiyadanli

    @relyn @Vanessa 直接用 ♥ 最好加一串 css 防止被选中,一开始我也用的 ♥ ,后来发现还是用 fontawesome 的字体比较方便。。

    .heart {
      moz-user-select: -moz-none;
      -moz-user-select: none;
      -o-user-select:none;
      -khtml-user-select:none;
      -webkit-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }
    
  • @huiyadanli 选中会怎样?

  • huiyadanli

    @Vanessa 疯狂点击的时候,很容易双击选中 ♥ ,然后蒙上一片蓝色,不好看。一不小心拖拽还会直接跳转搜索。。。好吧,选中也没什么大问题,强迫症不能忍 😂

  • DIYgod 2

    @huiyadanli 因为很久以前在博客分享过... https://www.anotherhome.net/1412

    1 回复
  • huiyadanli

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

    //e.stopPropagation();
    
请输入回帖内容 ...
relyn
永远相信美好的事情即将发生 福州

推荐标签 标签

  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 2 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 104 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 354 关注
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • WebComponents

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

    1 引用 • 5 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖 • 3 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 4 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • danl
    146 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 2 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    6 引用 • 14 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1435 引用 • 10056 回帖 • 489 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 2 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 700 关注
  • 外包

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

    26 引用 • 232 回帖
  • 大疆创新

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

    2 引用 • 14 回帖 • 2 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 2 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 75 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 637 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖