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

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

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

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

    1 回复
  • huiyadanli

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

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

推荐标签 标签

  • Solo

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

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

    1441 引用 • 10069 回帖 • 495 关注
  • 自由行
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 740 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖 • 1 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 53 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    181 引用 • 408 回帖 • 486 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 2 关注
  • 服务器

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

    125 引用 • 585 回帖
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖 • 3 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 1 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 676 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 201 关注
  • 倾城之链
    23 引用 • 66 回帖 • 168 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 550 关注
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • 阿里云

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

    84 引用 • 324 回帖
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1280 回帖
  • 职场

    找到自己的位置,萌新烦恼少。

    127 引用 • 1708 回帖
  • IBM

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

    17 引用 • 53 回帖 • 141 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • Follow
    4 引用 • 12 回帖 • 11 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 786 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注