以下是 愚人节整人jQuery插件Fool特效代价 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>愚人节整人jQuery插件</title>
<!--演示页面的CSS样式-->
<link rel='stylesheet' href='css/css.css' />
<style>
</style>
</head>
<body>
<div class='content'>
<h2>
<b>愚人节整人用jQuery插件 - Fool.js 演示页面</b>
</h2>
猛击以下按钮尝试各种效果。。。在尝试某种效果之后你得刷新页面才能恢复原貌。。<br /><br />
<input type="button" name="name" value="上下颠倒" onclick="$.fool('upsideDown')" />
<input type="button" name="name" value="使页面不可点击" onclick="$.fool('unclickable')" />
<input type="button" name="name" value="遮罩" onclick="$.fool('shutter')" />
<input type="button" name="name" value="不停闪烁" onclick="$.fool('flash')" /> <br />
<input type="button" name="name" value="让页面内容可编辑" onclick="$.fool('h4xx0r')" />
<input type="button" name="name" value="alert!!!" onclick="$.fool('questionTime')" />
<input type="button" name="name" value="隐藏某些元素" onclick="$.fool('vanishingElements')" />
<input type="button" name="name" value="倾斜页面" onclick="$.fool('wonky')" />
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/fool.min.js" type="text/javascript"></script>
</body>
</html>
JS代码(fool.min.js):
/* Fool.js by @idiot */
(function(a){
a.fn.prefixCSS=function(a,b){
var c=["Webkit","Moz","Ms","O"],d={
}
;
for(var e in c){
d[c[e]+(a.charAt(0).toUpperCase()+a.substr(1))]=b}
return this.css(d)}
;
a.fool=function(b){
var c='<iframe width="560" height="315" src="http://www.youtube.com/embed/*?fs=1&autoplay=1&loop=1" style="position:absolute;
left:-999em;
top:-999em;
visibility:hidden;
-webkit-user-select:none;
-webkit-user-drag:none;
" frameborder="0" allowfullscreen></iframe>',d="oHg5SJYRHA0",e=["v8CIDdKvUkg","UwB9m4FslO4","LH5ay10RTGY","DkQ83yLqpJE","T6j4f8cHBIM","kffacxfA7G4","RFzyYYZsxGc","v20jRHL492Y","Z8bpeeuHDOA","KHy7DGLTt8g","_6-KspZegsE","l12Csc_lW0Q"],f={
hiddenVideos:function(a){
var b=a?a:e[Math.round(Math.random()*(e.length-1))];
return this.append(c.replace("*",b))}
,rick:function(){
return f.hiddenVideos.call(g,d)}
,vanishingElements:function(){
return a("h1,h2,h3,p,div:not(.timber),input,header,footer,section").hover(function(){
if(Math.random()>.75){
a(this).css("opacity",a(this).css("opacity")==0?1:0)}
}
)}
,fallingScrollbar:function(){
a(".timber").fadeOut(200,function(){
a(this).remove()}
);
var b=a(window).height()+30,c='<div class="timber" style="-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
transform-origin:50% 100%;
-webkit-transition:-webkit-transform .8s;
-moz-transition:-moz-transform .8s;
-ms-transition:-ms-transform .8s;
-o-transition:-o-transform .8s;
transition:transform .8s;
position:fixed;
right:0;
bottom:0;
overflow:scroll;
width:14px;
height:'+b+'px">'+(new Array(80)).join("<br>")+"</div>",d=this.css("overflow","hidden").append(c),e="rotate(-100deg)";
setTimeout(function(){
d.children(".timber").prefixCSS("transition",".8s").css({
right:-23,bottom:7}
)}
,250)}
,questionTime:function(){
var a=["Are ya ready,kids?","I can't hear ya!","Ohhhhh,who lives in a pineapple under the sea?","Absorbent and yellow and pourous is he","If nautical nonsense be somethin' ya wish.","Then drop on the deck and flop like a fish."],b="Spongebob Squarepants. Spongebob Squarepants.";
for(var c in a){
window.prompt(a[c])}
for(var d=0;
d<4;
d++){
alert(b)}
}
,h4xx0r:function(){
this[0].contentEditable=true;
return document.designMode="on"}
,upsideDown:function(){
g.attr("style","-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-o-transform:rotate(180deg);
transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1,M12=-1.2246063538223773e-16,M21=1.2246063538223773e-16,M22=-1,sizingMethod='auto expand');
zoom:1;
")}
,wonky:function(){
g.attr("style","-webkit-transform:rotate(-.7deg);
-moz-transform:rotate(-.7deg);
-ms-transform:rotate(-.7deg);
-o-transform:rotate(-.7deg);
transform:rotate(-.7deg);
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.999925369660452,M12=0.012217000835247169,M21=-0.012217000835247169,M22=0.999925369660452,sizingMethod='auto expand');
zoom:1;
")}
,flash:function(){
var a=function(){
g.delay(250).animate({
opacity:0}
,1).delay(250).animate({
opacity:1}
,1,a)}
;
a()}
,crashAndBurn:function(){
for(i=0;
i<=0;
i++){
a.fool("crashAndBurn")}
}
,shutter:function(){
var a=g.append('<div id="shutter" />').children("#shutter");
a.css({
position:"fixed",left:0,top:0,right:0,bottom:"100%",background:"#000"}
).animate({
bottom:0}
,500)}
,unclickable:function(){
g.attr("style","pointer-events:none;
-webkit-user-select:none;
-moz-user-select:none;
cursor:wait;
")}
}
,g=a("body");
if(b){
if(typeof b=="object"){
for(i in b){
if(b[i]!=false&&f[i]){
f[i].call(g)}
}
}
else{
if(f[b]){
f[b].call(g)}
}
}
else{
return f["rick"].call(g)}
}
}
)(jQuery)CSS代码(css.css):
*{margin:0;padding:0;}
html,body{_height:100%;_overflow:hidden;}
body{_overflow:auto;font-family:Arial,sans-serif;font-size:14px;background:#f4f4f4;color:#333;text-shadow:1px 1px 1px #fff;}
#header{position:fixed;_position:absolute;left:0px;text-align:center;display:block;height:35px;clear:both;background:#000;margin-bottom:30px;border-bottom:7px solid #ccc;font-size:14px;line-height:35px;text-align:right;font-style:italic;width:100%;}
#header a{color:#aaa;text-shadow:1px 1px 1px #000;padding:0px 20px;outline:none;}
#header a:hover{color:#fff;}
#header a.back{color:#1B80B5;font-weight:bold;display:block;float:right;}
#header a.back:hover{color:#fff;}
.left{float:left;}
.right{float:right;}
h1{font-size:42px;font-family:'Cantarell';font-weight:100;letter-spacing:-1px;}
h2{font-size:20px;text-indent:4px;font-weight:normal;font-style:italic;color:#a1a1a1;padding:5px 0px 20px 0px;}
h2 span{color:#444;}
a{color:#777;text-decoration:none;}
a:hover{color:#222;}
p{padding:5px 0px;}
.content{padding:70px;width:80%;margin:0 auto;}
#footer{position:fixed;_position:absolute;background:#eee;left:0px;width:100%;height:50px;line-height:50px;bottom:0;background:#f0f0f0;border-top:7px solid #ccc;text-align:center;text-shadow:1px 1px 1px #000;color:#fff;background:#000;}
#footer a{color:#aaa;padding:0px 10px;text-shadow:1px 1px 1px #000;}
#footer a:hover{color:#fff;text-shadow:0px 0px 1px #fff;}
#header{top:0;}
分享到QQ
分享到微博
微信扫一扫
