专栏首页夏时两款 Js 插件为你的网站添彩

两款 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 条评论
登录 后参与评论

相关文章

  • 用PHP读写文本文档制作最简单的访问计数器

    夏时
  • PHP 正则表达式后面接的/isU, /is, /s含义

    夏时
  • 分享几个IP获取地理位置的API接口

    夏时
  • 56. Vue原生js的组件拆分结构设计

    在历史问题的情况下,存在需要往jquery项目中引入vue.js框架的情况,这种情况下,因为前期并没有使用webpack进行打包压缩,所以考虑直接使用原生的js...

    Devops海洋的渔夫
  • flask toastr动态通知插件(flask 100)

    toastr.options = { "closeButton": false, "debug": true, "positionClass": "toa...

    用户5760343
  • fcm推送教程

    由于腾讯家的即时通讯类app都是使用的自家的信鸽推送服务,这样造成了服务常驻,手机异常耗电,于是我们这里可以使用FCM-for-Mojo这款app来使用FCM消...

    Erwin
  • 彩虹域名转发程序V2.0

    Youngxj
  • SEACMS 代码审计后台漏洞两则

    特殊时期在家都无聊死了,到 CNVD 的网站上看到 seacms 出了一个鸡肋后台的 SQL 注入。想来闲来无事,就下载一套源码看看。漏洞成因很简单很简单,那为...

    信安之路
  • 41.Linux应用调试-修改内核来打印用户态的oops

    1.在之前第36章里,我们学习了通过驱动的oops定位错误代码行 第36章的oops代码如下所示: Unable to handle kernel paging...

    张诺谦
  • Linux下TCP最大连接数受限问题

    一、 文件数限制修改 1、用户级别 查看Linux系统用户最大打开文件限制: # ulimit -n 1024 (1) vi /etc/security/li...

    李海彬

扫码关注云+社区

领取腾讯云代金券