分享几个恶搞 js 项目

2023-10-24 07:50
文章标签 项目 几个 js 分享 恶搞

本文主要是介绍分享几个恶搞 js 项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一,Fool js 

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

1,支持的特效

  • 消失的滚动条

  • 莫名其妙播放的音乐

  • 随机消失的页面元素

  • 不间断的弹出傻x的问题

  • 页面颠倒

  • 页面扭曲

  • 页面闪烁

  • 无限循环 -> 浏览器崩溃

  • 页面突然变纯黑

  • 无法点击

  • 整个页面可编辑

2,使用方法

<script src="fool.min.js"></script>
<script>
$(document).ready(function() { //  When the document is ready$.fool('flash'); //  Run the Rick Astley prank
});
</script>

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

$.fool({hiddenVideos: true, //  Show some wonderfully annoying videosvanishingElements: 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

二,fartscroll.js

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

1,使用方法

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

DOM加载后初始化fartscroll插件:

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

地址 : https://github.com/liwc0329/fartscroll.js

三,jShaker

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

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

它最初是由ajaxblender.com开发的

1,使用方法

1)将jQuery添加到您的项目中:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 

2)将jShaker添加到您的项目 

<script src="jshaker.js" type="text/javascript"></script>

3)开始像摇晃

<script type="text/javascript">
$(document).ready(function(){$('.block').click(function(){$(this).jshaker();});});
</script>

4)停止动画

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

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

地址 : https://github.com/liwc0329/jShaker

 

四,jQuery.spritely 任意摆布的小鸟

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

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

地址 : https://github.com/liwc0329/jquery.spritely

五,Wanker.js 重磅推荐!前端中枪没?

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

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

1,使用方法

安装jquery.wanker.js

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

<head><script src="jquery.wanker.min.js"></script>
</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

 

这篇关于分享几个恶搞 js 项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/273756

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,:本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat

pycharm跑python项目易出错的问题总结

《pycharm跑python项目易出错的问题总结》:本文主要介绍pycharm跑python项目易出错问题的相关资料,当你在PyCharm中运行Python程序时遇到报错,可以按照以下步骤进行排... 1. 一定不要在pycharm终端里面创建环境安装别人的项目子模块等,有可能出现的问题就是你不报错都安装

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

MyCat分库分表的项目实践

《MyCat分库分表的项目实践》分库分表解决大数据量和高并发性能瓶颈,MyCat作为中间件支持分片、读写分离与事务处理,本文就来介绍一下MyCat分库分表的实践,感兴趣的可以了解一下... 目录一、为什么要分库分表?二、分库分表的常见方案三、MyCat简介四、MyCat分库分表深度解析1. 架构原理2. 分

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

linux查找java项目日志查找报错信息方式

《linux查找java项目日志查找报错信息方式》日志查找定位步骤:进入项目,用tail-f实时跟踪日志,tail-n1000查看末尾1000行,grep搜索关键词或时间,vim内精准查找并高亮定位,... 目录日志查找定位在当前文件里找到报错消息总结日志查找定位1.cd 进入项目2.正常日志 和错误日

在.NET项目中嵌入Python代码的实践指南

《在.NET项目中嵌入Python代码的实践指南》在现代开发中,.NET与Python的协作需求日益增长,从机器学习模型集成到科学计算,从脚本自动化到数据分析,然而,传统的解决方案(如HTTPAPI或... 目录一、CSnakes vs python.NET:为何选择 CSnakes?二、环境准备:从 Py