分享几个恶搞 js 项目

浅浅的花香味﹌ 2021-09-21 09:04 512阅读 0赞

### 一，Fool js  ###

Fool.js是一个 jQuery 插件，包含了几种页面特效，可以用来在愚人节的时候整人，来实现更多的更变态的愚人功能，当然你也可以使用这个插件完成更多好看的效果。

**1,支持的特效**

*  消失的滚动条
 *  莫名其妙播放的音乐
 *  随机消失的页面元素
 *  不间断的弹出傻x的问题
 *  页面颠倒
 *  页面扭曲
 *  页面闪烁
 *  无限循环 -> 浏览器崩溃
 *  页面突然变纯黑
 *  无法点击
 *  整个页面可编辑

**2，使用方法**

配置各种不同的愚人效果，下面是配置了两种效果）

$.fool({
        hiddenVideos: true, //  Show some wonderfully annoying videos
        vanishingElements: true, //  Hide random elements as they interact
    });

**3，可选参数**

Fool.js具有的愚人效果列表，Rick Astley只是开始。有一个完整的范围内使用的有趣的选项。单击任何预览它们的选项，注意：这些会毁了浏览体验。准备刷新。

fallingScrollbar: true,   //  Want the scrollbar to fall over?
    rick: true,               //  The synonymous Rick Astley video, hidden off-screen
    hiddenVideos: true,       //  Show some wonderfully annoying videos
    vanishingElements: true,  //  Hide random elements as they interact
    questionTime: true,       //  Sing Spongebob with your browser!
    upsideDown: true,         //  Flip the page upside down!
    h4xx0r: true,             //  Make the page 100% editable
    wonky: true,              //  Make the page a little bit crooked
    flash: true,              //  Makes the site flash on and off
    crashAndBurn: true,       //  Runs an endless loop. This will kill your browser!
    shutter: true,            //  Forces a shutter on the screen
    unclickable: true,        //  Makes the page unclickable

> 地址 : [https://github.com/liwc0329/Fool.js][https_github.com_liwc0329_Fool.js]

### 二，fartscroll.js ###

你知道么，有了这个js库，你的页面滚动的时候就可以放屁！

**1，使用方法**

需要依赖于jquery,在页面中包含“ fartscroll.js”。

DOM加载后初始化fartscroll插件：

//每400像素滚动一次放屁
    farscroll(); 
    
    //放屁滚动每800像素
    farscroll(800);

> 地址 : [https://github.com/liwc0329/fartscroll.js][https_github.com_liwc0329_fartscroll.js]

### 三，jShaker ###

![20200707145311702.gif][]

点击页面元素，然后就闪个不停

jShaker是一个简单的jQuery插件，可在选定的网页元素及其所有子对象上模拟振动效果，从而产生振动效果。

它最初是由ajaxblender.com开发的

**1，使用方法**

1）将jQuery添加到您的项目中：

2）将jShaker添加到您的项目

3）开始像摇晃

4）停止动画

$(".block").jshaker.stop()

5）找到一个好用法，请记住，这件事可能会使您的浏览器变慢，因此请小心。

> 地址 : [https://github.com/liwc0329/jShaker][https_github.com_liwc0329_jShaker]

### 四，jQuery.spritely 任意摆布的小鸟 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70][]

很有创意的一个效果，手动手柄控制飞行方向及速度，小鸟就由你掌控了！

看，那小鸟的表情是不是很二的样子，特别是那对眼睛，我去这。。不自然啊也不科学啊~

> 地址 : [https://github.com/liwc0329/jquery.spritely][https_github.com_liwc0329_jquery.spritely]

### 五，Wanker.js 重磅推荐！前端中枪没？ ###

![20200707145718425.gif][]

作者知道一些前端人员已经养成习惯会调整窗口大小来看别人网页是不是响应式的了，所以写了这么个二不啦机的插件，动窗口你就中招。

插件是挺有创意的这倒没什么，重点官方给出的Example！太没品太无节操了！！不信你拿自己去试试。。。话说我在博客里也启用了，但没那么无节操。

**1，使用方法**

安装jquery.wanker.js

假设您已经在使用jQuery，请将文件包含在您的中`<head>`：

设计您的公共服务公告

<div class="wanker" data-wanker>
      <div class="wanker-content">
        <h1>The web was meant to be read, not squished.</h1>
        <p>Prevent excessive browser resizing and get people back to reading.</p>
      </div>
    </div>

在设计上调用wanker（）函数

$(function() {
      $('[data-wanker]').wanker();
    });

该消息将在浏览器连续调整大小1秒钟后显示，并在1.5秒后消失。宁愿选择自己的延迟时间和持续时间？没问题！

$(function() {
      $('[data-wanker]').wanker();
    });

> 地址 : [https://github.com/liwc0329/jquery.wanker][https_github.com_liwc0329_jquery.wanker]

[https_github.com_liwc0329_Fool.js]: https://github.com/liwc0329/Fool.js
[https_github.com_liwc0329_fartscroll.js]: https://github.com/liwc0329/fartscroll.js
[20200707145311702.gif]: /images/20210920/906c5e5469834aebabcea8998e2f978c.png
[https_github.com_liwc0329_jShaker]: https://github.com/liwc0329/jShaker
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2VjaGl6YW8xODM5_size_16_color_FFFFFF_t_70]: /images/20210920/91eec2d74323419d9cbc8f62673b99c9.png
[https_github.com_liwc0329_jquery.spritely]: https://github.com/liwc0329/jquery.spritely
[20200707145718425.gif]: /images/20210920/c7ab43324fcf4ddd9ba3176d1e5549a4.png
[https_github.com_liwc0329_jquery.wanker]: https://github.com/liwc0329/jquery.wanker