网站集成打字震动特效JS代码改进版

这又是一个拖欠了很久的分享,很早就有朋友留言问评论打字炫彩、震动特效怎么实现的。这功能其实网上早就有人分享 N 遍了,有点搜索技巧和 DIY 能力的站长同学也早就实现了。这里还是继续分享一下我这边的一些改进,也许有朋友可以用得到。网站集成打字震动特效JS代码改进版

简单的改进:

1、移动端关闭震动,移动端震动会显得很卡;

2、添加震动开关,方便不喜欢的朋友进行关闭,采用 Cookie 记忆同一个浏览器点击关闭一次即可。

Ps:没什么技术含量,略懂 JS 语法的朋友完全可以自己继续发挥。

以下是简单的部署步骤(不限于 WordPress,标准 HTML 网页均可使用):

1、将以下代码保存为 js 文件,比如 apm-min.js 上传到网站主题目录:

比如最终得到的 JS 地址:https://www.domain.com/wp-content/themes/begin/js/apm-min.js 能够在浏览器正常访问即可。

2、WordPress 在主题的评论模板文件 comments.php 中引入如下代码(位置随意),其他网站程序可以集成到网页的页脚等位置:

3、在想要出现震动开关的位置添加按钮代码:

Ps:每个人网站风格不一样,这个按钮样式就不给 CSS 代码了,自行 DIY 修改吧。

效果预览:在本页留言即可看到效果。网站集成打字震动特效JS代码改进版

之前很多朋友留言说震动太难受了,我只能说那么大个红色开关,你却视而不见?说明观察力有待提高啊!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:27   其中:访客  27   博主  0

  1. Hunter 0 来自天朝的朋友 谷歌浏览器 Windows 7 内蒙古呼和浩特市回民区 电信

    写的不错,一直挺喜欢大神的博客。希望有一天,通过慢慢地积累也能变成你一样。来试试效果,挺炫,就是打的字多了头晕,哈哈

  2. 安得养生网 0 来自天朝的朋友 谷歌浏览器 Windows 7 上海市杨浦区 /虹口区电信

    这个是挺炫的,学习了。

  3. sys 0 来自天朝的朋友 火狐浏览器 Windows 7 天津市 移动

    各有所爱,我觉得特效比较晃眼

  4. 技术宅 4 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省南京市 电信

    可以的,每天都来看看,受益匪浅。 :grin:

  5. 西枫里博客 2 来自天朝的朋友 QQ浏览器  MI 6 Build/NMF26X 上海市 移动

    最多只能接受烟花,震动太变态了。

    • 龙笑天 5 来自天朝的朋友 火狐浏览器 Windows 7 广东省深圳市 天威视讯

      哈哈哈 震得很难受吧~ :grin:

    • 狂放 3 来自天朝的朋友 谷歌浏览器  MZ63 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.53 Safari/537.36 江西省吉安市 移动

      震一震更健康

  6. 九四君 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省福州市 电信

    你这评论是不是有改过。为啥跟我的不一样。怎么弄的有教程?

  7. 海志蓄电池 0 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 移动

    好东西。学习,看代码太累啦哈

  8. 沈唁志 2 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省宝鸡市 联通

    :grin: 张戈大神又更文了 抖一抖

  9. aunsen 4 来自天朝的朋友 火狐浏览器 Windows 10 陕西省安康市旬阳县 联通

    这个效果可以的

  10. 小兵1945 0 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 电信

    厉害厉害,这个效果不错

  11. 明月登楼 6 来自天朝的朋友 谷歌浏览器  Android 6.0.1 MI 4LTE Build/MMB29M 河南省南阳市 电信

    这个特效现在真的是好火爆呀!Typecho上都看到好多在用的!

  12. 知网查重 0 来自天朝的朋友 搜狗浏览器 Windows 7 中国 移动

    卢松松博客过了的,路过! :evil:

  13. 七支剑 4 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信

    这是继车震之后的新震法么

  14. 明月登楼学习笔记Blog 1 来自天朝的朋友 火狐浏览器 Windows 10 河南省南阳市 电信

    嘿嘿,看到不少 Typecho 博客都用上这个特效了!

  15. RoseDiary 0 来自天朝的朋友 谷歌浏览器 Windows 10 山东省济宁市 联通

    很好,效果很酷。有时间在我的博客试一下。

  16. 动漫星空-最美不过二次元 0 来自天朝的朋友 谷歌浏览器 Windows 10 山东省威海市 联通

    这个震动确实有点不习惯,我以为只是评论框震动,没想到整个网页都震动,哈哈

  17. 大事记 1 这家伙可能用了岛国的代理 搜狗浏览器 Windows 7 日本

    小特效对用户体验蛮好的,这种js压缩一下再用比较好。

  18. 林东煌博客 1 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 11_3 like Mac OS X) AppleWebKit 北京市通州区 联通

    明天电脑上试一下效果。。。

  19. 杨泽业博客 2 来自天朝的朋友 谷歌浏览器 Windows 10 浙江省金华市义乌市 电信

    来试一试,我也是觉得只是酷而已,看起来脑袋晕

  20. 凹凸学社 0 来自天朝的朋友 谷歌浏览器 Windows 10 安徽省滁州市 电信

    我就是来试试看看这个震动,有没有快感!
    果然感觉不一样,有高潮!
    速度可控,真是太爽了。

  21. BanYuner 4 来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信

    我已经关闭了,感觉是真的头晕

  22. 青山 1 来自天朝的朋友 搜狗浏览器 Windows 7 江西省萍乡市 电信

    震一震,我想歪了

  23. 枫少 2 来自天朝的朋友 谷歌浏览器 Windows 10 宁夏 移动

    这个是很炫酷的啊 666

  24. 枫少 2 来自天朝的朋友 谷歌浏览器 Windows 10 宁夏 移动

    有博主吧这个集成到畅言里面吗

  25. 米秀街资讯 1 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

    第一次来你的博客,评论的时候发现了这么个特效,感谢博主放出源码,我拿走了啊~ :lol:

加载中,请稍候...