给NexT主题内添加页面点击出现爱心的效果

创建js文件

/themes/next/source/js/src下新建文件clicklove.js,接着把该链接下的代码拷贝粘贴到clicklove.js文件中。
代码如下:

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.οnclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

修改_layout.swig

\themes\next\layout\_layout.swig文件末尾添加:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

Hexo NexT主题添加点击爱心效果相关推荐

  1. hexo+yilia主题添加评论

    hexo+yilia主题添加评论 因为热爱,所以拼搏. --RuiDer 回顾hexo+yilia主题添加访问量 上一篇文章介绍了hexo+yilia主题添加访问量,如果需要点击hexo+yilia主 ...

  2. Hexo yilia 主题添加 valine 评论系统

    本文仅讨论在 yila 中所增加或修改的代码,有关 leancloud 的申请及配置,请参考我所参考的两篇博文: <Hexo yilia主题 添加valine评论系统> <Valin ...

  3. Hexo yilia 主题添加相册功能

    当我们使用hexo博客框架中的yilia主题时,在我们这一博客页面中,原作者Litten并未帮我们添加相册这一功能.这时,如果想让我们的博客拥有相册的功能,就需要我们自行添加改变.添加主题中的相关参数 ...

  4. hexo yilia主题添加评论系统详细教程

    文章目录 序言 添加相关代码 1. config.yml 2. yilia\layout\_partial\article.ejs 3.valine.ejs 安装评论 序言 其实网上关于Hexo的博客 ...

  5. hexo添加点击爆炸效果 duang duang duang

    首先在themes/next/source/js/src里面建一个叫fireworks.js的文件,代码如下: "use strict";function updateCoords ...

  6. Hexo yilia 主题添加来必力评论系统

    1. 主题配置添加来必力 修改 hexo 博客目录的 theme/yilia 中的 _config.yml 文件,增加如下配置: # livere 来必力.将 false 改为自己的uid则启用该评论 ...

  7. Hexo Next主题添加访客统计、访问次数统计、文章阅读次数统计

    Hexo的版本:v3.9.0 Next的版本:v7.4.0 1.打开next主题配置文件\themes\next_config.yml,搜索找到busuanzi_count,把enable设置为tru ...

  8. Hexo Next主题添加百度统计

    1.首先你要有个百度账号,然后登录百度统计https://tongji.baidu.com新增网站,添加完毕后到代码获取拿到统计脚本,如下: <script> var _hmt = _hm ...

  9. Hexo NexT主题添加友链

    版本 Hexo: 6.2.0 NexT: 7.8.0 NexT官方文档 主题配置文件 主题配置文件地址\Blog\themes\next7.8.0下的_config.yml文件 示例: # Blog ...

最新文章

  1. django错误参考
  2. Unable to find the ncurses libraries or the required header files解决
  3. PS提示错误1解决办法
  4. 【开源】我的分页控件正式命名为QuickPager ASP.NET2.0分页控件
  5. ARM发布自动驾驶芯片架构,重新宣示车载系统市场的主权
  6. ie浏览器修复_微软IE浏览器曝零日漏洞:一个老文件格式,可致系统文件遭窃...
  7. Windows CE 5.0 五笔输入法
  8. 搬运: CVonline: 图像数据库(二) (更新于20190821)
  9. 网上商城系统源码 B2C电子商务系统源码
  10. Laravel学习笔记汇总——Eloquent Model模型和数据库操作
  11. Selection dont contain a main type
  12. 浅析相机相关坐标系的相互转换(世界坐标系、相机坐标系、图像坐标系、像素坐标系、内参矩阵、外参矩阵、扭转因子)【相机标定计算机视觉】
  13. 《刷新:重新发现商业与未来》读后感
  14. 星际争霸人族科技球介绍
  15. BI工具调研之——帆软
  16. Live555本地保存H264/PCM视频音频帧附加SPS/PPS
  17. 程序设计-在校整理-06 最常公共子序列与子串+2048小游戏+KNN简单实例
  18. 嵌入式计算机课程设计,嵌入式系统设计课设报告.doc
  19. 按键精灵sub子程序篇
  20. html5支持4k视频,【4K电影大礼包】目前压缩最好的五部4KHEVC(H.265)格式电影

热门文章

  1. treeview 控件使用和数据绑定
  2. Android版MrHuo工作室客户端开发心得(二)
  3. Linux之watch命令
  4. java mvc 源码分析_SpringMVC 源码解读笔记
  5. UE4材质是什么样的机制
  6. 编译mod_jk.so
  7. oracle instr函数详解
  8. 如果一个国家是一种颜色,中国的颜色美哭了!
  9. 斯坦福NLP笔记51 —— An Intro to Parts of Speech and POS
  10. 教你学习CI框架codelgniter——CI框架基本配置