两款 Js 插件为你的网站添彩

在网页中合理的利用一些特效能带给人眼前一亮的感觉。今天给大家分享两款很有意思的 Js 特效插件。

输入框打字冒光特效

这款特效本博客也在使用,也有很多人问过是怎么实现的。具体的效果请看 GIF 图:

食用方法:

普通网站:

在网站中引入 activate-power-mode.js (下载地址在文末)

  1. <script src="activate-power-mode.js "></script>  

然后再插入一段 JS 进行配置:

  1. <script>  
  2. POWERMODE.colorful = true;  // 冒光特效
  3. POWERMODE.shake = false;    // 抖动特效
  4. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效
  5. </script>  

如果是 WordPress 网站,那么先上传 activate-power-mode.js 到 当前主题目录/js 文件夹中,然后打开主题的 footer.php,并在里面插入如下代码即可:

  1. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
  2. <script>  
  3. POWERMODE.colorful = true;  // 冒光特效
  4. POWERMODE.shake = false;    // 抖动特效
  5. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效
  6. </script>  

这个特效在移动端可能会导致有点卡,体验不是很好。如果想要仅仅在 PC 端使用,那么可以这样:

  1. <?php if (!wp_is_mobile()): ?>  
  2. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>  
  3. <script>  
  4. POWERMODE.colorful = true;  // 冒光特效
  5. POWERMODE.shake = false;    // 抖动特效
  6. document.body.addEventListener('input', POWERMODE); // 为所有 input 标签都加上特效
  7. </script>  
  8. <?php endif; ?>  

鼠标滑过随机文字变换特效

这个特效用起来颇有一股极客的风味~为什么这么说呢?请看下面这个 Demo:

  • 代码审计
  • 社工渗透
  • 提权测试
  • 端口扫描

食用方法:

在页面中引用 jquery 和 chaffle.min.js

  1. <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>  
  2. <script src="./js/chaffle.min.js"></script>  

启用插件对应的 class

  1. <script>  
  2.   $(document).ready(function() {  
  3.     $('.chaffle').chaffle();  
  4.   });   
  5. </script>  

html

  1. <a href="#" class="chaffle" data-lang="en">nav01</a>    
  2. <a href="#" class="chaffle" data-lang="en">nav02</a>    
  3. <a href="#" class="chaffle" data-lang="en">nav03</a>    
  4. <a href="#" class="chaffle" data-lang="en">nav04</a>    
  5. <a href="#" class="chaffle" data-lang="zh">中文(汉字)</a>    
  6. <a href="#" class="chaffle" data-lang="zh">孟坤博客</a>    
  7. <a href="#" class="chaffle" data-lang="ja-katakana">カタカナ</a>   

下载地址

百度网盘蓝奏云永硕E盘

参考资料

[1].如何给WordPress博客网站添加评论输入特效.boke112导航 http://boke112.com/3681.html

[2].Chaffle:Shuffle Randomly Character.blivesta https://github.com/blivesta/chaffle

[3].jquery随机字符插件Chaffle http://www.jq22.com/jquery-info549

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小尘哥的专栏

使用HTML5播放音频在移动端不能循环

做了一个H5页面,需要一个mp3做为背景音乐,在PC端调试没问题,然后用手机扫码打开结果就不能循环播放,记录踩过的坑

603
来自专栏谈补锅

拖拽手势和清扫手势冲突时(UIPanGestureRecognizer和UISwipeGestureRecognizer冲突时)

  故事发生在这样的情境上:给整个控制器添加了一个拖拽手势,然后又在控制上的每个Cell上加了左滑清扫手势,然后问题来了:只有拖拽手势起作用,而左滑手势没有效果...

692
来自专栏Material Design组件

HIG:Extensions - Home Screen Quick Actions

Human Interface Guidelines链接:Home Screen Quick Actions

441
来自专栏技术小黑屋

两分钟理解Android中SP与DP的区别

因此通常情况下,我们还是建议使用sp作为字体的单位,除非一些特殊的情况,不想跟随系统字体变化的,可以使用dp.

652
来自专栏Youngxj

EMLOG评论获取QQ资料

1723
来自专栏编程微刊

如何获取公众号里面的歌曲

6064
来自专栏数据小魔方

如何在Excel里加载第三方插件,让你的Excel功能更加强大!!!

今天是小魔方的第三篇推送教程,要谈的话题是如何在Excel里加载第三方插件工具! 记得第一期的时候讲的如何调用开发工具,其实微软公司在开发office办公套件的...

2985
来自专栏DeveWork

WordPress 代码实现相关文章(列表模式)功能

之前分享的相关文章代码化功能是仿无觅的图文模式,现在分享的一个是文章列表陈列模式。代码最初来自 Willin Kan,经过zwwooooo 的修改优化。不得不说...

1627
来自专栏V站

图片API丨网站如何接入Bing每天一更背景?

Bing,即必应。常常有些站都是千篇一律的底色背景,毫无新意,导致的即是访客一个一个访你友链都不访那些死鬼站长!这就是Bing每天一更背景,也十分的骚,需要的上...

2057
来自专栏ASP.NETCore

WPF使ListBox支持手势多选功能

手势功能在手持平台应用较为丰富,PC上的应用还不是很多,不过还是有一些软件已应用这个功能如遨游浏览器等,应用得当还是相当可以丰富用户的互交体验的。

883

扫码关注云+社区