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

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

效果如下:
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
永远相信美好的事情即将发生 福州

推荐标签 标签

  • 工具

    子曰:“工欲善其事,必先利其器。”

    297 引用 • 755 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 347 关注
  • Markdown

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

    169 引用 • 1527 回帖 • 2 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    6 引用 • 26 回帖 • 547 关注
  • JetBrains

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

    18 引用 • 54 回帖 • 2 关注
  • MongoDB

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

    90 引用 • 59 回帖 • 6 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 53 关注
  • OpenCV
    15 引用 • 36 回帖
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    410 引用 • 3588 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 678 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 101 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    180 引用 • 821 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 665 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言,是一个使用基于类型系统来执行查询的服务端运行时(类型系统由你的数据定义)。GraphQL 并没有和任何特定数据库或者存储引擎绑定,而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 5 关注
  • OpenResty

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

    17 引用 • 55 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 169 关注
  • Love2D

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

    14 引用 • 53 回帖 • 549 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 95 关注
  • OnlyOffice
    4 引用 • 21 关注
  • 倾城之链
    23 引用 • 66 回帖 • 160 关注
  • Pipe

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

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

    132 引用 • 1115 回帖 • 120 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 662 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    172 引用 • 516 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 159 关注