给博客添加两个有意思的特效

一、添加鼠标点击特效:

添加鼠标点击特效,(“富强”, “民主”, “文明”, “和谐”, “自由”, “平等”, “公正” ,”法治”, “爱国”, “敬业”, “诚信”, “友善”)等。

  1. <script type=“text/javascript”>
  2. /* 鼠标点击特效 */
  3. var a_idx = 0;
  4. jQuery(document).ready(function($) {
  5.     $(“body”).click(function(e) {
  6. var a = new Array(“富强”“民主”“文明”“和谐”“自由”“平等”“公正” ,“法治”“爱国”“敬业”“诚信”“友善”);
  7. var $i = $(“<span/>”).text(a[a_idx]);
  8.         a_idx = (a_idx + 1) % a.length;
  9. var x = e.pageX,
  10.         y = e.pageY;
  11.         $i.css({
  12. “z-index”: 999999999999999999999999999999999999999999999999999999999999999999999,
  13. “top”: y – 20,
  14. “left”: x,
  15. “position”“absolute”,
  16. “font-weight”“bold”,
  17. “color”“#ff6651”
  18.         });
  19.         $(“body”).append($i);
  20.         $i.animate({
  21. “top”: y – 180,
  22. “opacity”: 0
  23.         },
  24.         1500,
  25. function() {
  26.             $i.remove();
  27.         });
  28.     });
  29. });
  30. </script>

效果如图:

鼠标点击特效

 

二、添加评论框输入特效:

添加以下代码到主题尾部调用即可

  1. <script src=“activate-power-mode.js”></script>
  2. <script>
  3. POWERMODE.colorful = true// 控制开启/开启礼花特效  
  4. POWERMODE.shake = false// 控制开启/关闭屏幕震动特效  
  5. document.body.addEventListener(‘input’, POWERMODE);
  6. </script>

在输入框打字时跟随光标弹出烟花很是炫酷(还可以开启屏幕震动哦!)

true 为开启

false 为关闭

 

效果如图:

输入特效

activate-power-mode.js代码太长就不贴出来了

附activate-power-mode.js文件下载:

[url href=https://eyun.baidu.com/s/3pKW6Exl]提取码:laod[/url]

 

三、主要注意事项:

  1. 鼠标点击特效的代码添加到主题页脚文件或者js里面
  2. 评论框输入特效请自己填写你的activate-power-mode.js文件路径。
  1. <script src=“activate-power-mode.js”></script>

 

原创文章,作者:老D,如若转载,请注明出处:https://laod.cn/4039.html

(2)
上一篇 2017-09-28
下一篇 2017-10-17

相关推荐

  • 月底博客将更换机房 Hong Kong → Tokyo

    博客近期经常遇到一些烦人的事情,例如每天N多次的500错误、各种报错、流量超标等…感觉这主机速度不如以前了。月底这段时间将我博客从香港搬到东京,砸钱换更好的配置,由于没…

    心情琐事 2015-09-23
    2.5K450
  • 这几天重制了博客LOGO

    如题; 以前的直接用字母L做了个LOGO,最近看着挺别扭的,然后现在LOGO用D字母为主题绘制。 直接放几张效果图:

    2019-11-27
    8.0K120
  • 关于调整Google hosts等其他hosts分享策略

    最近发现有个别时间流量异常,然后我查看了下,发现有人抓取我博客上的文件。 下次再更新,我将删除本地所有txt文件,所有hosts分别网盘分享,以后你将无法直接在我网站上在线点击查看…

    2015-09-13
    6.3K681
  • 老D博客十周年了

    光阴如水,岁月如莲;时间过的真快,不知不觉老D博客已经走过了10个年头。 真正意义上是从2010年申请的第一个域名开始… 很久没有更新博客了,借这个特殊的日子回想一下这…

    2020-05-14
    17.8K40
  • 从朋友圈看女神的情感状态

    女人无论做什么,总是会下意识的分享出来或者找点理由自圆其说。据此,我们很容易通过一个女人的朋友圈来判断其情感状态。 一、单身的标志 一个女人如果朋友圈全是自拍,咔咔各种姿势角度,搔…

    2016-02-11
    3.3K100
  • 这是这么的折腾

    月初就开始弄那款主题了,已经完成85%,但是在文章分类的时候忽然觉得这款主题只合适少量的内容,不利于蜘蛛爬虫。(以前只是想弄整那样,少量的内容,炫酷的主页)纠结啊,于是乎又干掉了~…

    2014-06-13
    2.3K50
  • 关于老D微信公众号已经转移通告

    如大家所见,老D博客已经走了10年了,准确的说是“11年”,但是这两年我就没有管过博客,具体原因就是前几年更新的hosts文件被查水表后,然后也有一些文章被网信办、公司要求删除,感…

    2022-03-05
    12.2K01
  • 博客本月两次流量已经超标!

    Bandwidth Limit Exceeded The server is temporarily unable to service your request due to t…

    2015-05-23
    3.9K460
  • 告诉吊丝们,最不值得为女生做的几件事TOP5

    有些男吊丝总是喜欢开导木耳,每当那些木耳们跟她们的男朋友吵架了,男吊丝们就连忙跑上去大加安慰,或是甜言蜜语地劝导,或是对那男的破口大骂,希望木耳们能够移情别恋,看上自己。但不幸的是…

    2015-03-26
    3.9K90
  • 对某知名压缩软件说:呵呵

    原文已删除! 可查看火绒安全发布的分享报告:http://www.huorong.cn/info/1531309921141.html 如果开发人员感染病毒导致产品被污染可以理解,…

    2018-07-12
    24.5K880

发表回复

登录后才能评论

评论列表(111条)

  • 乐小鱼
    乐小鱼 2017-10-06 20:45

    好玩,很政治正确!

  • 56643945
    56643945 2017-10-06 15:53

    测试评论~挖槽,特效真牛逼

  • 三条
    三条 2017-10-06 15:30

    测试评论特效

  • cyalias
    小Y 2017-10-06 14:47

    酷毙了,太好玩了,嘿嘿,过来赞一下!

  • MonkeyD
    MonkeyD 2017-10-06 12:41

    这个特效看起来不错啊。。。。回复评论都更有动力了。。就是不能支持输入法汉语拼音出来的位置。。。不过也想到高级了

  • hipsan
    hipsan 2017-10-06 08:41

    哈哈, 我是来测试效果的,很炫酷 :grin:

  • lipel
    lipel 2017-10-05 22:29

    试试,哇,效果好棒,哈哈哈

  • 默默
    默默 2017-10-05 20:50

    这个效果挺新奇的,感觉挺不错的。不过我觉得点击出现的文字上面可以加个样式“cursor:default”,这样鼠标的光标就会一致,而不会在点击的时候出现选择文字的光标了 :mrgreen:

  • happy
    happy 2017-10-05 17:42

    laod,1怎么弄?
    是放页面结尾吗?

  • 路人甲
    路人甲 2017-10-05 15:12

    评论特效有点卡顿。

  • Alex
    Alex 2017-10-05 14:59

    这个特效看起来好炫酷啊

  • 老白
    老白 2017-10-05 09:18

    感谢老D,请问JS那个咋弄啊,我不懂JS啊

  • yue
    yue 2017-10-04 18:33

    纯新手不太懂,自己的路径是这样吗

  • huruiyang
    huruiyang 2017-10-04 15:26

    老D,什么是主题页脚文件

  • usyoung
    usyoung 2017-10-04 14:45

    我就为了看下特小果

  • 1147439990
    1147439990 2017-10-04 13:14

    我自己啦看看,哈哈哈,颤抖

  • xibadeyu
    xibadeyu 2017-10-04 12:21

    反映一个bug:在行数过多时,特效会在评论框下方……

  • a16998
    a16998 2017-10-04 09:07

    写成油猴脚本吧!这样挺好玩的!!!!

  • nr3
    nr3 2017-10-04 04:03

    酷毙了,可惜电脑萌新的我还是看不太明白啊

  • silascript
    silascript 2017-10-04 00:42

    最早是atom编辑器的一个插件!

  • zz569655423
    zz569655423 2017-10-03 23:24

    这么酷炫的吗?冲这技术也要留言赞一个

  • Imagination
    Imagination 2017-10-03 22:44

    小白 求问 下载了activate-power-mode.js文件,怎么使用?

  • Howard
    Howard 2017-10-03 22:10

    这种打字的特效,玩几次还可以,天天这样。 眼睛觉得累。。。

  • jim2019
    jim2019 2017-10-03 16:41

    感觉打字好带感!!!!!!!!!!!!!! :idea:

  • bkc35
    bkc35 2017-10-03 12:41

    好玩

  • andyzhou
    andyzhou 2017-10-03 12:15

    实验,太棒了!!!

  • DpBLACK
    DpBLACK 2017-10-03 11:37

    这操作真是爆炸 :razz:

  • Asp
    Asp 2017-10-03 11:01

    那个特效貌似是不是atom有个包……以前用那个的时候我还没瞎(捂脸)

  • NeveRossa
    NeveRossa 2017-10-03 10:46

    写成油猴脚本吧

  • theia
    theia 2017-10-02 21:55

    酷,刚学完html和css,准备学js,等js学完,我就可以用了。。。

  • mooredam
    mooredam 2017-10-02 20:28

    有趣

  • smeil123
    smeil123 2017-10-02 20:28

    哈哈哈哈哈这两个特效真滴玩上瘾

  • 1999
    1999 2017-10-02 18:31

    就感覺打字敲得特有力度?
    點擊跳字太醉人。。。

  • 好玩
    好玩 2017-10-02 17:50

    好好好好好玩

  • 睡觉塞牙
    睡觉塞牙 2017-10-02 16:04

    打字快了就是一种非常不好的体验了。

  • plb12345
    plb12345 2017-10-02 16:03

    哇,好酷

  • LaJi_Jiemo
    LaJi_Jiemo 2017-10-02 14:31

    太好玩了。 但是某狗输入法只能按字出来后才有特效

  • live
    live 2017-10-02 11:49

    怎好玩!哈哈哈!

  • 少年时vklw
    少年时vklw 2017-10-02 11:14

    我来试试特效哈哈哈哈哈哈哈哈哈

  • Ewing
    Ewing 2017-10-02 08:46

    真好玩哈哈,测试上瘾了

  • macau168
    macau168 2017-10-01 23:09

    显示屏打字太快跳得有点可怕。

    • 老D
      老D 2017-10-01 23:34

      @macau168先过把瘾,过段时间再把屏幕震动关了

    • efxz
      efxz 2017-10-02 19:28

      @老D老D,能弄个设置让我们自己选择吗,我感觉这两种特效都挺棒的O(∩_∩)O~~

  • 904
    904 2017-10-01 22:59

    我来试试,确实很苦

  • 张甲博客
    张甲博客 2017-10-01 22:07

    不知道为什么上传到根目录还是上传到文件夹,都没有起作用

    • 老D
      老D 2017-10-01 23:36

      @张甲博客评论框输入特效请自己填写你的activate-power-mode.js文件路径。

  • 纯洁的童鞋
    纯洁的童鞋 2017-10-01 20:17

    玩上瘾了怎么办?在线等

  • Duang
    Duang 2017-10-01 19:55

    评论时整个网页都在颤动……

  • null
    null 2017-10-01 18:48

    很讨厌那24个叶公好龙的政@治口.号

  • leoxxx
    leoxxx 2017-10-01 18:08

    Interesting :mrgreen:
    但是我这里打字没效果。

  • kk2333
    kk2333 2017-10-01 17:53

    牛逼,666!

  • 星空之颠
    星空之颠 2017-10-01 17:39

    emmmm…..依然是8小时前

  • foutlook
    foutlook 2017-10-01 17:08

    屌爆了。。。。。。。。。。。。。。。