• 欢迎访问《源码家园》,本站可以通过Ctrl+F搜索标签搜索你自己的问题,欢迎加入源码家园: QQ群
  • 请勿直接引用本站的图片链接,否则你的文章图片失效勿怪!
  • 博客看到的二维码食用方法:打开手机QQ的右上角那个+的“扫一扫”,扫一下这个二维码就好了,也可以用别的扫描二维码工具直接扫描!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧!

wordpress博客添加评论输入activate-power-mode打字特效

网站源码 小白 1年前 (2017-02-20) 1233次浏览 已收录 1个评论 扫描二维码

这个效果原本是 Atom 编辑器的一个插件,名为 activate-power-mode,后来被 Github 上的一位 coder 做成了 JS 脚本。现在只要在网页里引用一下,我们的网站也可以拥有这样的效果:

wordpress 博客添加评论输入 activate-power-mode 打字特效

 

使用方法:

首先本特效需要一个 JS 文件, 自己去作者的 GitHub 下载:

https://github.com/disjukr/activate-power-mode

下载下来以后,上传到主题的 JS 位置,或者你习惯的位置。

找到你主题目录下的 comments.php(footer.php、header.php 也可),我的是在 comments.php(评论模板)里面的<?php 的上面新增<整个 PHP 文件里面的代码最顶部>,

代码里面 js 链接地址要更换为自己刚才放 js 的地方的链接。

添加如下代码:

PS:注意我那个是演示代码,下面多了一行<?php,意思就是说明我上面说的在这个 php 上面加代码的!还有修改之前最好备份一下自己的博客数据,预防你自己改错了!

<script src=”http://Vip333.Cn/js/activate-power-mode.js”></script&gt;

<script>

POWERMODE.colorful = true; /* make power mode colorful*/

POWERMODE.shake = false; /* turn off shake*/

document.body.addEventListener(‘input’, POWERMODE);

</script>

 

<?php

可以根据需要,自行更改上面代码里 POWERMODE.colorful、POWERMODE.shake 的参数,比如评论特效的颜色,或者震动开关,由于我觉得网页震动开了的话对于手机浏览的人可能会卡,所以我关了!

我在我的博客也放了这个特效,你可以到下面评论回复试下效果!

 


源码家园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明wordpress 博客添加评论输入 activate-power-mode 打字特效
喜欢 (4)
[2517723188@qq.com]
分享 (0)
小白
关于作者:
本人擅长Ai、Fw、Fl、Br、Ae、Pr、Id、Ps等软件的安装与卸载,精通CSS、Javascr ipt、PHP、ASP、C、C++、C#、Java、Ruby、Perl、Lisp、python、Objective-C、Actionscr ipt、Pascal等单词的拼写,熟悉Windows、Linux、Mac、Android、IOS、WP8等系统的开关机!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 非常好的文章,我得先试试.跑步客求回访!
    跑步客2017-11-29 21:17 回复 Windows 10 | Chrome 53.0.2785.116