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

老D
老D
老D
683
文章
2316
评论
更多
 2017-10-0116:41:54 111 18,045 1297字阅读4分19秒

一、添加鼠标点击特效：

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

  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文件下载：

提取码：laod

 

三、主要注意事项：

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

 

weinxin
老D博客 微信公众号
请大佬们关注订阅老D博客微信公众号， 扫一扫关注，从此不迷路。 不定时放出邀请码、福利、推送更新等...

您必须才能发表评论！

评论：111   其中：访客  98   博主  13
    • avatar Anwenyu 0
      2019-08-31 15:30 92楼

      第一个特效 提示jQuery未定义

      • avatar GODxi 1
        2017-12-10 11:14 91楼

        点击出现字的为什么用不了

        • avatar hugh_hang 3
          2017-10-31 10:22 90楼

          那个鼠标点击跳字的特效，实现每次的字颜色不一样吗？

          • avatar hhyu 4
            2017-10-22 14:18 89楼

            能不能搞一个开关？？？

            • avatar shrimp 0
              2017-10-19 14:00 88楼

              和idea power插件一一样的效果，NICE

              • avatar 306341577 0
                2017-10-18 17:06 87楼

                试试看我有没有头像

                  • 老D 老D
                    2017-10-19 15:37 1层

                    回复 306341577 没有，（已经有了，需要我手动同步，这个一般半个月同步一次）

                  • avatar jooone 0
                    2017-10-17 16:55 86楼

                    感觉好爽啊！！！啊啊啊啊感觉快高潮了呢

                    • avatar ExclusiveBeacon 0
                      2017-10-17 16:24 85楼

                      犀利

                      • avatar whyyyyyy 1
                        2017-10-17 15:54 84楼

                        js代码都给出来，良心啊。。

                        • avatar 熏鱼 1
                          2017-10-17 11:38 83楼

                          说真的苹果打字真的好卡，坐标：自带浏览器。卡成ppt

                            • 老D 老D
                              2017-10-17 11:50 1层

                              回复 熏鱼 不应该呀，虽然我没用过Mac Safari 但是苹果一直走在前沿的

                                • avatar 熏鱼 1
                                  2017-10-17 12:36 2层

                                  回复 老D 还没试过其他浏览器！不知道是不是内核的原因！？

                                    • avatar LEOLI 1
                                      2017-10-23 13:26 3层

                                      回复 熏鱼 这个是chrome的回复，很顺畅，不知道为什么自带的会那么卡

                                • avatar amor 0
                                  2017-10-17 09:29 82楼

                                  i3处理器能hold住，贼酷炫了哈哈哈哈哈

                                  • avatar owensun 2
                                    2017-10-17 09:28 81楼

                                    老D 牛！

                                    • avatar 秋日暖阳 0
                                      2017-10-17 08:44 80楼

                                      关注laod很久了，学习到很多。永远支持laod，感谢laod！

                                      • avatar New Divide 2
                                        2017-10-11 09:46 79楼

                                        这个有点酷炫啊，66666666

                                        • avatar hanlin 0
                                          2017-10-10 22:23 78楼

                                          这个blog的主题是开源的吗？希望博主告知

                                          • avatar 洛记包子铺 1
                                            2017-10-10 22:07 77楼

                                            真他么帅，打字好爽~！！ :neutral:

                                            • avatar 小白c 0
                                              2017-10-10 20:46 76楼

                                              这也太秀了吧

                                              • avatar yanshui177 0
                                                2017-10-10 18:32 75楼

                                                真好 啊啊啊 啊啊啊啊啊啊，从此爱上了打字，哈哈哈哈哈

                                                • avatar 大树先生 2
                                                  2017-10-10 16:55 74楼

                                                  牛逼了！666送给老D~~~

                                                  • avatar 岳龙 0
                                                    2017-10-10 16:01 73楼

                                                    这么帅，太酷了。。

                                                    • avatar XXG 1
                                                      2017-10-10 14:49 72楼

                                                      果然是很炫丽。 可惜我没有注册码。

                                                      • avatar G 1
                                                        2017-10-10 10:55 71楼

                                                        卡的不要不要的……

                                                          • 老D 老D
                                                            2017-10-10 19:51 1层

                                                            回复 G 是不是笔记本配置低的原因？

                                                              • avatar G 1
                                                                2017-10-10 20:42 2层

                                                                回复 老D 戴尔塔式服务器主机。。。可能是我把chrome的GPU加速都关了的事，chrome有闪屏bug

                                                            • avatar hedan 0
                                                              2017-10-10 10:07 70楼

                                                              加了这个特效，卡的要死！整个页面都在不停飘移！使用体验太差了！要么我拍一段视频你看看！操作系统：Mac OS10.13 浏览器Chrome 61

                                                              • avatar lllllep 1
                                                                2017-10-10 08:59 69楼

                                                                炫酷!忍不住想要评论~~~

                                                                • avatar laoA 1
                                                                  2017-10-09 16:32 68楼

                                                                  这个要怎么全局使用呢，怎么用在其他地方呢，比如说写字板啦，word里啦？

                                                                  • avatar owen 0
                                                                    2017-10-09 16:17 67楼

                                                                    点击放烟花更好玩

                                                                    • avatar pugss 1
                                                                      2017-10-09 13:50 66楼

                                                                      冒泡的颜色还是不错的，但是抖动的确实看到有点眼花…

                                                                      • avatar 夜落叶 1
                                                                        2017-10-09 10:59 65楼

                                                                        感觉老给力了

                                                                        • avatar skg 1
                                                                          2017-10-09 10:32 64楼

                                                                          貌似可以在ide里玩玩这个，冒气泡蛮好玩的，酷炫啊！老D

                                                                          • avatar fang 2
                                                                            2017-10-09 10:05 63楼

                                                                            好玩

                                                                            • avatar echol 0
                                                                              2017-10-09 09:20 62楼

                                                                              很酷炫，真的很棒！！！赞一个！！！！

                                                                              • avatar 大猫 0
                                                                                2017-10-09 09:04 61楼

                                                                                很厉害的样子，支持老D

                                                                                • avatar lllllep 1
                                                                                  2017-10-09 08:46 60楼

                                                                                  确实很炫酷!!!!!!!
                                                                                  评论起来跟玩游戏一样!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :mrgreen:

                                                                                  • avatar nineday 1
                                                                                    2017-10-08 13:11 59楼

                                                                                    确实很炫酷啊，但是打字感觉有点卡，不知道是不是我电脑配置的问题

                                                                                    • avatar Zy143L 0
                                                                                      2017-10-08 11:44 58楼

                                                                                      这个抖动动画 看起来有点臃肿啊 而且并不是很流畅….

                                                                                      • avatar long609689209 0
                                                                                        2017-10-08 09:21 57楼

                                                                                        不行啊，感觉好卡，这特效太猛了

                                                                                        • avatar Moyanren 2
                                                                                          2017-10-08 02:31 56楼

                                                                                          这很强势

                                                                                          • avatar sdopa 0
                                                                                            2017-10-07 23:51 55楼

                                                                                            学习了！

                                                                                            • avatar 小波 0
                                                                                              2017-10-07 16:44 54楼

                                                                                              哈哈，确实是非常的酷炫，但是看久了总觉得有点杀马特QWQ

                                                                                              • avatar 快乐网讯 0
                                                                                                2017-10-07 15:11 53楼

                                                                                                文章不错支持一下吧

                                                                                                • avatar 252 1
                                                                                                  2017-10-07 13:19 52楼

                                                                                                  出来了谢谢老D

                                                                                                  • avatar 如何践行社会主义核心价值观 0
                                                                                                    2017-10-07 11:35 51楼

                                                                                                    特效好厉害