以下是 Windows XP错误框拖动 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Windows XP</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Windows XP错误框拖动</h1>
<div id="content">
<p class="info">还记得“好日子”当你仍在使用Windows XP？如果是的话，我敢肯定，你还记得的负载，会弹出错误对话框，在一个完全随机的时间。虽然这些对话框始终显示在一个坏的时间，你可以做一些漂亮整洁的。拖动窗口，它会自我复制一遍又一遍！</p>
<p class="info">本页面试图达到同样的效果，但现在使用HTML / CSS <a href="#/" title="jQuery">jQuery</a> and <a href="#/" title="jQuery UI">jQuery UI</a>. 通过拖动下面的窗口，那些回忆。</p>
<div id="windowsxp">
<div id="errordialog" class="dialog">
<h3>Windows XP中的“错误”对话框</h3>
<img src="images/error.png" alt="Error image" />
<p>哎呀 - 看起来你正在做一些非常重要的。因为我不喜欢生产力，我就简单地停止工作，离开你这个无用的错误消息。</p>
<p>不过不用担心，我会离开你一些很酷的东西。将我看到发生了什么！</p>
<p><a href="#/" title="13141618.taobao.com" target="_blank" class="button">让我出去！</a></p>
</div>
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p>
<p>来源：<a href="#/" target="_blank">站长素材</a></p>
</div>
</body>
</html>JS代码(script.js):
/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
/*** Global variables*/
// Time for the interval to duplicate the dialogvar DUPLICATIONTIME = 100;
// Maxium count of windows before BSODvar MAXWINDOWCOUNT = 100;
$(document).ready(function(){
// Place the error dialog in the center of the screenvar offset = $("#errordialog").offset();
var xPos = offset.left;
var yPos = offset.top;
$("#errordialog").css({
'top':yPos + 200 + 'px','left':xPos + 200 + 'px'}
);
// Handle for the intervalIDvar intervalId;
// Make the dialog draggable$("#errordialog").draggable({
handle:'h3',// Only the heading is draggablecontainment:'parent',// Prevent the window getting dragged out the parentstart:function(event,ui){
// Create an interval when the user starts dragging the windowintervalId = setInterval("duplicateWindow()",DUPLICATIONTIME);
}
,stop:function(event,ui){
// Clear the interval when the user stopped draggingclearInterval(intervalId)}
}
);
}
);
/*** Function to duplicate the error dialog*/
var windowCount = 0;
var errorDialogZIndex = 1;
function duplicateWindow(){
// Clone the error dialog and append it to the Windows XP screenvar clone = $("#errordialog").clone().appendTo('#windowsxp');
// Bring the dragging error dialog up front by changing the Z-indexerrorDialogZIndex++;
$("#errordialog").css('z-index',errorDialogZIndex);
// Check if the maximum window count has been reachedwindowCount++;
if(windowCount == MAXWINDOWCOUNT){
$("#windowsxp").empty().css('background-image','url(images/bsod.jpg)');
}
}
CSS代码(style.css):
/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|*/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{font:14px Georgia,serif;background-image:url("../images/bg.jpg");}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
#content p.info{margin:20px;color:#eee;}
#content p.info a{color:#eee;}
/* WINDOWS XP */
#windowsxp{width:800px;height:640px;background-image:url("../images/background.jpg");-moz-box-shadow:0px 0px 5px #888;-webkit-box-shadow:0px 0px 5px #888;}
.dialog{width:400px;background-color:#f0ede0;position:absolute;background-image:url("../images/dialogheader.jpg");background-repeat:repeat-x;border-bottom:3px ridge #0034b0;border-left:2px solid #1783f2;border-right:2px solid #1783f2;-moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;-webkit-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;}
.dialog h3{height:29px;font-size:16px;color:#eee;text-shadow:1px 0px 1px #0a2b96;padding:5px 0 0 10px;-moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;-webkit-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;}
.dialog img{float:left;padding:20px;}
.dialog p{padding:10px;font-size:12px;color:#000 !important;}
.button{text-decoration:none;color:#000;display:block;margin:0 auto;width:75px;height:20px;border:1px solid black;text-align:center;}
分享到QQ
分享到微博
微信扫一扫
