共有三款表白
效果1 ：
效果2：
效果3：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>唯美 </title>
<meta name="keywords" content=" ">
<meta name="description" content=" ">
<meta name="author" content="www.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="css/reset.css" type="text/css" media="all"><link rel="shortcut icon" href="index/images/favicon.ico"><link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="screen"><link rel="stylesheet" href="css/style.css" type="text/css" media="all"><link href="css/prettyPhoto.css" rel="stylesheet" /><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="js/content_switch.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.mousewheel.js"></script><script type="text/javascript" src="js/jquery-ui.js"></script><script type="text/javascript" src="js/cScroll.js"></script><script src="js/jquery.cycle.all.latest.js" type="text/javascript"></script><script src="js/jquery.color.js" type="text/javascript"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/functions.js"></script><script src="js/prettyPhoto.js"></script><!--[if lt IE 9]><script type="text/javascript" src="./js/html5.js"></script><link rel="stylesheet" href="./css/ie.css" type="text/css" media="all"><![endif]--><!--[if lt IE 8]><div style=' clear: both; text-align:center; position: relative;'><a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a></div><![endif]--><body onpaste="return false" ondragstart="return false" onmouseover="window.status='';return true" oncopy="return false;"><frameset> <frame src="index.html"> </frameset>
<script>
function stop(){
alert('宝贝，我爱你！');
return false;
}
document.oncontextmenu=stop;
</script>
<body onselectstart="return false" onpaste="return false" oncopy="return false;"
oncut="return false;" >
</a><script>function checkhtml5(){if ($.browser.msie && parseInt($.browser.version, 10) < 9) {document.body.innerHTML="<div style=' clear: both; text-align:center; position: relative; height: 50px; margin-top: 30px; padding: 20px; background-color: red; color: white; font-size:20px;'>你的浏览器非常落后，不支持 HTML5!<br/>请使用 Chrome 14+/IE 9+/Firefox 7+/Safari 4+ 其中任意一款浏览器访问此页面。</a></div>";}}</script><style>a.wb_sina {float:left;margin-top:20px;margin-left:15px;display:inline-block;padding:4px 10px;border-radius:3px;background-color:#e55345;background-image:-moz-linear-gradient(top,#e96249,#e03c40);background-image:-ms-linear-gradient(top,#e96249,#e03c40);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e96249),to(#e03c40));background-image:-webkit-linear-gradient(top,#e96249,#e03c40);background-image:-o-linear-gradient(top,#e96249,#e03c40);background-image:linear-gradient(top,#e96249,#e03c40);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e96249',endColorstr='#e03c40',GradientType=0);background-repeat:repeat-x;text-shadow:0 -1px 0 rgba(0,0,0,.5);border:1px solid #cf2b28;color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);}a.wb_sina:hover {background-image:-moz-linear-gradient(top,#e03c40,#e96249);background-image:-ms-linear-gradient(top,#e03c40,#e96249);background-image:-webkit-gradient(linear,0 0,0 100%,from(#e03c40),to(#e96249));background-image:-webkit-linear-gradient(top,#e03c40,#e96249);background-image:-o-linear-gradient(top,#e03c40,#e96249);background-image:linear-gradient(top,#e03c40,#e96249);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e03c40',endColorstr='#e96249',GradientType=0);}a.wb_sina span {display:inline-block;vertical-align:-5px;margin-right:7px;height:20px;width:24px;background:url(./images/weibo.png) no-repeat;}a.wb_tencent {float:left;margin-top:20px;margin-left:15px;display:inline-block;padding:4px 10px;border-radius:3px;background-color:#0e7fcc;background-image:-moz-linear-gradient(top,#1288d4,#0771c1);background-image:-ms-linear-gradient(top,#1288d4,#0771c1);background-image:-webkit-gradient(linear,0 0,0 100%,from(#1288d4),to(#0771c1));background-image:-webkit-linear-gradient(top,#1288d4,#0771c1);background-image:-o-linear-gradient(top,#1288d4,#0771c1);background-image:linear-gradient(top,#1288d4,#0771c1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1288d4',endColorstr='#0771c1',GradientType=0);background-repeat:repeat-x;text-shadow:0 -1px 0 rgba(0,0,0,.5);border:1px solid #0D6EB8;color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 rgba(0,0,0,.2);}a.wb_tencent:hover {background-color:#0e7fcc;background-image:-moz-linear-gradient(top,#0771c1,#1288d4);background-image:-ms-linear-gradient(top,#0771c1,#1288d4);background-image:-webkit-gradient(linear,0 0,0 100%,from(#0771c1),to(#1288d4));background-image:-webkit-linear-gradient(top,#0771c1,#1288d4);background-image:-o-linear-gradient(top,#0771c1,#1288d4);background-image:linear-gradient(top,#0771c1,#1288d4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0771c1',endColorstr='#1288d4',GradientType=0);}a.wb_tencent span {display:inline-block;vertical-align:-5px;margin-right:7px;height:20px;width:24px;background:url(./images/weibo.png) no-repeat 0 -20px;}#abox{position: fixed;_position: absolute;right: 15px;z-index: 99999999;}</style>
</head><body onLoad="checkhtml5()">
<div id="abox">
</div>
<div class="page_spinner"><div></div>
</div>
<div class="over"><div class="centre"><div class="main"><!--header --><header><h1><span id="logo"><img src="images/logo1.png" alt="" usemap="#logo"></span></h1><nav class="menu"><ul id="menu"><li id="nav1"><img src="images/nav1.png" alt=""><span>爱的宣誓</span></li><li id="nav2"><img src="images/nav2.png" alt=""><span>恋爱历程</span> </li><li id="nav3"><img src="images/nav3.png" alt=""><span>絮叨絮叨</span></li><li id="nav4"><img src="images/nav4.png" alt=""><span>祝福我们</span></li><li id="nav5"><img src="images/nav5.png" alt=""><span>爱的映像</span></li><li id="nav6"><img src="images/nav6.png" alt=""><span>时光沙漏</span></li></ul></nav><img src="images/spacer.gif" alt="" id="navigation" usemap="#navigation"><map name="navigation" class="navigation"></map><map name="logo" class="map_logo"></map></header><!--header end--><!--content --><map name="back" class="map_back"></map><article id="content"><ul><li id="page_Home"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav1.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>爱的宣誓</h2>人物：浟佳 & 宝贝<br />不在乎曾经拥有，只在乎天长地久。<br />爱，就要说出来！<br />再美好的回忆，也只是回忆；<br />再美丽的诺言，不到实现的那一刻，也只是一句空话。<br/>-- </div></li><li id="page_About"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav2.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>恋爱历程</h2><div class="relative"><div class="scroll"><span>人物：浟佳 & 宝贝</span><p> 宝贝你还记得么？</p><p> XX年X月X日。</p><p> 我们在xx相遇。</p><p> 然后.........</p><p> 过程.........</p><p> 我爱你，我会一直陪在你身边</p><p> 不离不弃</p><p> - </p></div></div></div></li><li id="page_Talk"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav3.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>絮叨絮叨</h2><div class="relative"><div class="scroll"><div style="width:100%;float: left; border-bottom: 1px solid #CCCCCC;">浟佳<br/><span style="float: right"> --by </span></div><div style="width:100%;float: left">分享我所知道的<br/><span style="float: right"> --by </span></div></div></div></div></li><li id="page_Message"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav4.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>祝福我们</h2><div class="relative"><div class="scroll"><div style="min-height: 300px; padding-bottom: 50px;">
<!-- 多说评论框 start --><div class="ds-thread" data-thread-key="yyu" data-title="bb" data-url="http://"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript"> var duoshuoQuery = {short_name:"love90"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '/static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>
<!-- 多说公共JS代码 end --></div></div></div></div></li><li id="page_Blog"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav5.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad"><h2>爱的映像</h2><div class="relative"><div class="scroll"><ul class="gallery fancybox"><li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh001.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh001small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/imglsh002.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/imglsh002small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img003.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img003small.jpg" alt=""></a></li><li style="line-height:120px"><a href="images/uploadimage/img004.jpg" rel="prettyPhoto[gallery1]"><img src="images/uploadimage/img004small.jpg" alt=""></a></li></ul></div></div></div></li><li id="page_Time"><img src="images/bg_content.png" alt="" class="bg_cont"><span class="back"><img src="images/nav6.png" alt="" usemap="#back"><a href="index.html#close">返回</a></span><div class="pad">
<h2>时光沙漏</h2><div id="loveHeart" style="margin-top: 30px;font-size: 25px;"><span style="">宝贝你知道我爱你爱了多久了吗？</span><div id="elapseClock" style="margin: 10px 0px 10px 0px;"></div><img src="images/1.gif" /> <img src="images/2.gif" /><br/><br/><div id="loveu">爱：从2014-2-6开始！<br/><div class="signature" style="float: right; margin-right: 50px;">by 浟佳 </div></div></div></div></div></li></ul></article><!--content end--></div>
</div><div class="bg1"> <div class="main"><!--footer --><footer style="line-height:20px"><div id="copyright"><a href="" target=_blank></a> <a
href="" target=_blank></a> <script language="JavaScript"></script></object></div><!-- {%FOOTER_LINK} --></footer><!--footer end--></div></div>
</div>
<script>
$(window).load(function() { $('.page_spinner').fadeOut();$('body').css({overflow:'visible'});})
</script><script type="text/javascript">//修改时光沙漏时间var offsetX = $("#loveHeart").width() / 2;var offsetY = $("#loveHeart").height() / 2 - 55;var together = new Date();together.setFullYear(2014, 02, 06);together.setHours(17);together.setMinutes(0);together.setSeconds(0);together.setMilliseconds(0);setTimeout(function () {adjustWordsPosition();startHeartAnimation();}, 3000);timeElapse(together);setInterval(function () {timeElapse(together);}, 500);adjustCodePosition();$("#code").typewriter();
</script><audio id="bgmMusic" src="http://www.51mp3ring.com/51mp3ring_com2/at200611121582079026.mp3" preload="auto" type="audio/mp3" autoplay loop></audio><!--coded by koma--><!--LIVEDEMO_00 -->
</div></body>
</html>
/* Left & Right alignment */.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}
.relative{ position:relative;}/* Global properties ======================================================== */body{ background: url(../images/bg.jpg) no-repeat top center; border:0; font:12px 'Droid Sans', sans-serif; color:#939090; line-height:21px; min-width:946px; overflow:hidden}.css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); position: relative;}.page_spinner{ position:absolute;background: url(../images/bg.gif) ; z-index:99; width:100%; height:100%; top:0; left:0}
.page_spinner div{ position:absolute;background: url(../images/loader.gif) 50% 50% no-repeat;width:100%; height:100%; top:0; left:0}.left_block{ float:left; width:220px; background:#fff;}/* Global Structure ============================================================= */.main { margin: 0 auto; width: 946px; position:relative; }.centre{margin-top:0; position:relative;}body, html{ height:100%;}
.over{ position:relative; width:100%; overflow:hidden;min-height:100%; height:auto !important;}.bg1{ position:absolute; left:0; width:100%; height:64px; background:url(../images/bg_footer.png) 0 0 repeat-x; bottom:0}/* ============================= main layout ====================== */a{ color:#939090; text-decoration: none; outline:none}
a:hover{}
h1{ position:absolute; top:184px; left:329px; z-index:10}
h2{ font:30px 'Amatic SC', cursive; line-height:1.2em; padding:0 0 24px 0; color:#3e3434; text-align:center; letter-spacing:-3px; font-weight:bold; text-shadow:0 0 #3e3434; font-family:"微软雅黑"}
h2 span{ display:block; font-size:24px; color:#766f6f; line-height:1.2em; letter-spacing:-1px; text-shadow:0 0 #766f6f; padding-bottom:4px;}
p{ padding-bottom:18px;}/* ============================= header ====================== */
header{}#logo{ display:block;}
#logo img{ position:relative; top:25px; left:25px}.menu{}
#menu {}
#menu > li { position:absolute;}
#menu > li > img{ position:relative; z-index:6; top:15px; left:15px;}
#menu > li > span{ position: absolute; width:145px; top:82px; color:#fff; text-align:center; left:15px; text-shadow:1px 1px rgba(0,0,0,.2); z-index:9}#nav1{ top:105px; left:304px;}
#nav2{ top:239px; left:230px;}
#nav3{ top:372px; left:304px;}
#nav4{ top:372px; left:458px;}
#nav5{ top:239px; left:536px;}
#nav6{ top:105px; left:458px;}#navigation{ position:absolute; z-index:12; top:120px; left:245px; height:424px; width:451px;}.submenu{ position:absolute; top:113px; left:-98px; z-index:13;}
.submenu ul{ background:url(../images/bg_submenu.gif) repeat; padding:16px 5px; width:122px; position:relative; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
.submenu li{ line-height:40px; position:relative;}
.submenu a{ position:relative; color:#fff; display:block; padding:0 23px;}
.submenu img{ position:absolute; width:100%; height:0; top:20px; left:0}/* ============================= content ====================== */#content{ height:636px; padding-bottom:64px;}
#content > ul > li{ position:relative; left:225px; top:27px; width:100%;}.bg_cont{ position:absolute; top:0; left:0; z-index:1}.pad{ position:relative; z-index:2; left:94px; top:110px; width:388px; height:430px; font-size: 16px; line-height: 32px;}.link1{ position:relative;}
.link1 span{ position: absolute; bottom:0; left:0; width:0; height:1px;}.back{ position:absolute; top:212px; left:163px; z-index:6}
.back img{ position: relative; top:15px; left:15px;}
.back a{ position:absolute; top:85px; left:15px; color:#fff; text-align:center; width:145px; text-shadow:1px 1px rgba(0,0,0,.4)}.color1{ color:#3e3434}.pad_bot1{ padding-bottom:12px;}
.pad_left1{ padding-left:35px;}
.marg_right1{ margin-right:20px;}#icons{ padding-top:28px; text-align:center}
#icons li{ display:inline-block; margin-top:-12px; margin-right:5px;}
#icons a{ display:block; position:relative;}
#icons .img_act{ position:absolute; top:0; left:0}.scroll{height:308px; width:362px; overflow:hidden;}
.track{ width:22px; height:287px; padding:24px 0; top:28px !important; left:366px !important; background: url(../images/scroll_track.jpg) 0 0 no-repeat}
.shuttle{ width:16px; height:16px; background: url(../images/scroll_drag.png) 0 0 no-repeat; margin-left:3px;}
._up-butt, ._down-butt{ height:0px !important;}.gallery{}
.gallery li{ float:left; margin-bottom:13px; margin-right:14px;}
.gallery a{ display:block; position:relative;}
.gallery .last{ margin-bottom:0;}
.gallery span{ position:absolute; top:0; left:0; background:url(../images/border1.png) 0 0 no-repeat; width:100%; height:100%;}.comments{ float:right; margin-left:20px; line-height:26px; margin-top:7px;}
.comments strong{ float:left; margin-right:2px; background:url(../images/bg_comments.png) 0 0 no-repeat; color:#fff; width:40px; text-align:center; font-weight:normal}.date{ float:left; width:41px; height:34px; background:#ececec; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; line-height:16px; color:#3e3434; padding:3px 0; text-transform:uppercase; text-align:center; margin-right:14px;}.blog{ width:100%; height:260px; overflow:hidden; margin-bottom:15px}.next, .prev{ float:left; color:#3e3435; line-height:24px; padding:0 7px; margin-right:9px; margin-left:10px; background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}
.prev{ margin-left:15px;}.pagin{ float:left;}
.pagin a{ float: left; font-size:11px; width:24px; line-height:24px; color:#1b1b1b; text-align:center; margin-left:1px; margin-right:1px;background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}.google_map{width:384px; height:303px; position:relative; z-index:1; background:#fff; margin-bottom:21px;border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; overflow:hidden;}.col1{ width: 164px; float:left;}/* ============================= footer ====================== */footer { color:#000000; padding-top:21px;}
footer a{ color:#000000}
footer a:hover{}.social{ float:right;}
.social li{ float:left; margin-right:9px; padding-right:10px; background:url(../images/footer_line.gif) right 6px no-repeat}
.social .last{ background:none; margin-right:0; padding-right:0}
.social a{ position:relative;}
.social span{ position: absolute; bottom:0; left:0; width:0; height:1px;}/* ============================= forms ============================= */#ContactForm{}
#ContactForm .wrapper{ overflow:inherit; min-height:40px;}
#ContactForm .success{ padding-bottom:15px; display:none}
#ContactForm label{ position:relative;min-height:22px; display: inline-block;}
#ContactForm .message{ height:222px;}
#ContactForm span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#4d820a; line-height:14px; display:none; width:100%}
#ContactForm a{ margin-left:20px; float:right;}
#ContactForm .input { margin:0;width:181px; height:15px; background: none; padding:3px 10px;color:#474747; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;resize:none}#ContactForm .bg{ background:#fff; border-top:1px solid #c2c2c2; border-left:1px solid #c2c2c2; position:relative;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; display:inline-block;}/* ============================= forms ============================= */#ContactForm{ position:relative;}
#ContactForm .wrapper{ overflow:inherit; min-height:50px;}
#ContactForm .success{ display:none; position:absolute; bottom:0; left:0; color:#fff}
#ContactForm label{ position:relative;min-height:34px; display: inline-block;}
#ContactForm .message{ height:97px;}
#ContactForm span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#fff; line-height:14px; display:none; width:100%}
#ContactForm a{ margin-left:20px; float:right;}
#ContactForm .input { margin:0;width:282px; height:16px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;resize:none;width:594px; height:58px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}#ContactForm .bg{ display:inline-block;}
#ContactForm .pad_left1{ padding-left:12px;}
#ContactForm .col1{ width:300px;}#ContactForm {padding:0;
}
#ContactForm .bg{padding:0;display: inline-block;float: left;position: relative;
}
#ContactForm .wrapper {overflow:inherit;min-height:40px;
}
#ContactForm .success {padding-bottom: 0px;text-transform:uppercase;font-size:10px;position:relative;float:left;color: #000;width: 100%;line-height: 11px;
}
#ContactForm label {position:relative;display:inline-block;float: left;width: 100%;padding-bottom: 6px;
}
#ContactForm span {display:block
}
#ContactForm .error,#ContactForm .empty {font-size:9px;color: #796D71;line-height:9px;display:none;width: 100%;top:0px;position:relative;text-transform:uppercase;float: left;
}
#ContactForm a {position:relative;z-index:1;
}
#ContactForm a:hover {text-decoration:none;}
#ContactForm .input {width: 235px;padding: 8px 10px;color: #796D71;outline:none;font-size: 12px;font-family: Arial;}
#ContactForm textarea {overflow:auto;margin:0;width: 330px;height: 125px;padding: 10px 10px;color: #796d71;resize:none;outline:none;font-size: 12px;font-family: Arial;
}
#ContactForm .block {display:inline-block;position:relative;width: 100%;float: left;
}
#ContactForm .magRight1{margin-right:16px;}
.formButtons{position:relative; float: right; display: inline-block;margin-top: 58px; margin-right:20px; font-weight:bold;}
.formBtn{display:inline-block; position:relative; margin-right: 6px;}.signature{margin-top:10px;font-size:20px;font-style:italic}
#copyright{text-align:center;width:100%;color:#666}.fancybox img{width:167px;height:130px}
/* ============================= end forms ============================= */
$(document).ready(function() {$('.navigation').append('<area shape="poly" coords="224,82, 339,149, 339,279, 224,346, 109,279, 109,149" href="#close" alt="Jammy�s Folio ui designer & developer" class="logo">')$('.navigation').append('<area shape="poly" coords="147,-5, 219,40, 219,120, 147,160, 74,120, 74,40" href="#!/page_Home" alt="" class="nav1">')$('.navigation').append('<area shape="poly" coords="73,129, 145,174, 145,254, 73,294, 0,254, 0,174" href="#!/page_About" alt="" class="nav2">')$('.navigation').append('<area shape="poly" coords="147,261, 219,307, 219,387, 147,427, 74,387, 74,307" href="#!/page_Talk" alt="" class="nav3">')$('.navigation').append('<area shape="poly" coords="300,261, 372,307, 372,387, 300,427, 228,387, 228,307" href="#!/page_Message" alt="" class="nav4">')$('.navigation').append('<area shape="poly" coords="379,129, 451,174, 451,254, 379,294, 306,254, 306,174" href="#!/page_Blog" alt="" class="nav5">')$('.navigation').append('<area shape="poly" coords="300,-5, 372,40, 372,120, 300,160, 228,120, 228,40" href="#!/page_Time" alt="" class="nav6">');$('.map_back').append('<area shape="poly" coords="73,-5, 145,40, 145,120, 73,160, 0,120, 0,40" href="#close" alt="" id="back">')$('.map_logo').append('<area shape="poly" coords="115,-7, 230,60, 230,190, 115,257, 0,190, 0,60" href="#close" alt="Jammy�s Folio ui designer & developer" class="logo">')// hovervar n;$('.navigation area').hover(function(){n=$(this).attr('class');fl2=false;if (n=='logo') {$('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')} else {n=parseInt(n.slice(-1))$('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})$('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})}}, function(){var n=$(this).attr('class');if (n=='logo') {$('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')} else {n=parseInt(n.slice(-1));$('#nav'+n+'> img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack', function(){$(this).css({zIndex:6})})$('#nav'+n+'> div').stop(true, true).delay(200).animate({height:'hide'}, function(){})}})$('.logo').hover(function(){$('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')}, function(){$('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')})$('#back, .back a').hover(function(){$('.back img').stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack')}, function(){$('.back img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack')})$('.submenu li').hover(function(){$(this).find('img').stop().animate({height:40, top:0},600,'easeOutCirc')}, function(){$(this).find('img').stop().animate({height:0, top:20},600,'easeOutCirc');})$('.submenu').stop().animate({height:'hide'},0)$('.submenu').hover(function(){$('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})$('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})}, function(){fl=false;$('.navigation area').mouseleave()})$('.link1, .social a').each(function(){var color=$(this).css('color')$(this).prepend('<span></span>')$(this).find('span').css({background:color})})$('.link1, .social a').hover(function(){$(this).find('span').css({width:0, opacity:1}).stop().animate({width:'100%'})}, function(){$(this).find('span').stop().animate({opacity:0})})$('#icons .img_act').css({opacity:0})$('#icons a').hover(function(){$(this).find('.img_act').stop().animate({opacity:1})}, function(){$(this).find('.img_act').stop().animate({opacity:0})})/*$('.gallery span').css({opacity:0})$('.gallery a').hover(function(){$(this).find('span').stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})}, function(){$(this).find('span').stop().animate({opacity:0})})*/// fancybox/*$("a[rel=Appendix]").fancybox({'transitionIn' : 'fade','transitionOut' : 'fade','titlePosition' : 'over','titleFormat' : function(title, currentArray, currentIndex, currentOpts) {return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';}});*/// blog$('.blog').cycle({fx: 'scrollVert',pager:'.pagin', // selector for element to use as pager containeractivePagerClass: 'active', // class name used for the active pager linktimeout: false, // milliseconds between slide transitions (0 to disable auto advance)speed: 800, // speed of the transition (any valid fx speed value)prev: '.prev', // selector for element to use as event trigger for previous slidenext: '.next' // selector for element to use as event trigger for next slide});if ($.browser.msie && $.browser.version == 8) {var num=0;$('.pagin a').each(function(num){$(this).data({num:num})})$('.pagin a').eq(num).addClass('active')$('.pagin a').click(function(){num=$(this).data('num')$(this).addClass('active').siblings().removeClass('active')})$('.prev').click(function(){if (num!=0) {num=num-1} else {num=$('.pagin a').length-1}$('.pagin a').eq(num).addClass('active').siblings().removeClass('active')})$('.next').click(function(){if (num!=$('.pagin a').length-1) {num=num+1} else {num=0}$('.pagin a').eq(num).addClass('active').siblings().removeClass('active')})} else {$('.prev, .next').hover(function(){$(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})}, function(){$(this).stop().animate({color:'#3e3435', backgroundColor:'#ececec'})})$('.pagin .active').css({background:'none', fontWeight:'bold'})$('.pagin a').click(function(){$(this).stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})})$('.pagin a').hover(function(){if (!$(this).hasClass('active')) {$(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})}}, function(){if (!$(this).hasClass('active')) {$(this).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})}})$('.prev, .next').click(function(){$('.pagin .active').stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})})}
});
$(window).load(function() {var fl_cont=true;$('a, area').click(function(){if (!fl_cont) {return false}})// scroll$('.scroll').cScroll({duration:700,step:63,trackCl:'track',shuttleCl:'shuttle'})$('#menu > li').each(function(num){$(this).data({left:$(this).css('left'), top:$(this).css('top')})})//content switchvar content=$('#content'),nav=$('.menu');nav.navs({useHash:true})content.tabs({actFu:function(_){if (_.prev && _.curr) {fl_cont=false;_.prev.find('.pad').stop().animate({opacity:0}, function(){$(this).css({display:'none'});_.prev.find('.back').stop().animate({opacity:0}, function(){$(this).css({top:212, left:163, opacity:1, display:'none'}); $(this).css({opacity:'none'})})_.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){_.curr.find('.back').css({top:384, left:477, opacity:0, display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})_.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){_.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'});fl_cont=true;})})})})} else {if (_.curr) {fl_cont=false;$('#navigation').css({display:'none'})$('#menu > li').stop().animate({top:239, left:385},1000,'easeInBack', function(){$(this).find(' > img').stop().animate({top:92, left:88, width:0, height:0},1000,'easeInBack', function(){})$('#menu > li').css({display:'none'});$('h1').stop().animate({top:-16, left:44}, 600, 'easeInBack')_.curr.find('.back').css({display:'block'});_.curr.find('.back').stop().animate({top:384, left:477}, 600, 'easeOutBack', function(){_.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){_.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'});fl_cont=true;})})})})fl=false;$('.navigation area').mouseleave()}if (_.prev) {fl_cont=false;_.prev.find('.pad').stop().animate({opacity:0}, function(){$(this).css({display:'none'});_.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){$('h1').stop().animate({top:184, left:329}, 600, 'easeInBack')_.prev.find('.back').mouseleave();_.prev.find('.back').stop().animate({top:212, left:163}, 600, 'easeOutBack', function(){_.prev.find('.back').css({display:'none'});$('#menu > li').css({display:'block'});$('#navigation').css({display:'block'})var num=$('#menu > li').length;for (i=0;i<num;i++) {var th=$('#menu > li').eq(i);th.stop().delay(220*i).animate({top:th.data('top'), left:th.data('left')}, 600, 'easeOutBack')th.find(' > img').stop().delay(220*i).animate({top:15, left:15, width:145, height:157},600,'easeOutBack', function(){})}fl_cont=true;})})})}}},preFu:function(_){$('#content > ul > li').css({position:'absolute'})$('.bg_cont').css({top:303, left:281, width:0, height:0})$('.pad').css({opacity:0, display:'none'})$('.back').css({display:'none'})}})nav.navs(function(n, _){content.tabs(n)if(n=="#!/page_Time")googleMap()})function googleMap(){/*if(googleMap.ready)return falsegoogleMap.ready=true;(function afterAnimation(){var tmp=$('*:animated')if(tmp.length)$.when(tmp).then(afterAnimation)else{var cssPath='.google_map',holder=$(cssPath),src='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Brooklyn,+New+York,+NY,+United+States&aq=0&sll=37.0625,-95.677068&sspn=61.282355,146.513672&ie=UTF8&hq=&hnear=Brooklyn,+Kings,+New+York&ll=40.649974,-73.950005&spn=0.01628,0.025663&z=14&iwloc=A&output=embed',str='<iframe class="blo" width="'+holder.width()+'" height="'+holder.height()+'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+src+'"></iframe>'holder.html(str)}})()*/}var m_top=0, h_cont=730;function centre() {var h=$(window).height();if (h>h_cont) {m_top=(h-h_cont)/2+30;} else {m_top=30}$('.centre').stop().animate({paddingTop:m_top})}centre();$(window).resize(centre);})下载地址： 大学生情人节，520表白html源代码-Javascript文档类资源-CSDN下载采用HTML+CSS+JavaScript实现，内置有3款表白代码，造型独特。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qgy92320/85404291
