xin
/
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>loveTimeline</title>
<link href="css/default.css" rel="stylesheet" />
<link href="css/history.css" rel="stylesheet" />
<!-- 添加百度统计 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden_dev.js"></script>
<script type="text/javascript" src="js/functions_dev.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="mainDiv">
		<div id="content" style="width: 1110px; height: 625px; margin-top: 57px; margin-left: 165px;">
			<div id="loveHeart">
				<canvas id="garden" width="670" height="625"></canvas>
				<div id="words">
					<div id="messages">
						We love so long
						<div id="elapseClock"><span class="digit">0</span> 年 <span class="digit">0</span> 月 <span class="digit">0</span> 天 <span class="digit">0</span> 时 <span class="digit">0</span> 分 <span class="digit">0</span> 秒</div>
					</div>
					<div id="loveu">
						Love in accumulation, any time!<br>
						<div class="signature">——<a href="#" target="_blank">周新雨</a></div>
					</div>
				</div>
			</div>
		</div>

	</div>
	<script type="text/javascript">
		var offsetX = $("#loveHeart").width() / 2;
		var offsetY = $("#loveHeart").height() / 2 - 55;
		var displayMode = 1;
		var together = new Date();
		together.setFullYear(2023,3, 14);
		together.setHours(8);
		together.setMinutes(36);
		together.setSeconds(12);
		together.setMilliseconds(0);

		$("#loveHeart").click(function(){
			displayMode *= -1;
			timeElapse(together, displayMode);
		});

		if (!document.createElement('canvas').getContext) {
			var msg = document.createElement("div");
			msg.id = "errorMsg";
			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
			document.body.appendChild(msg);
			$("#code").css("display", "none")
			$("#copyright").css("position", "absolute");
			$("#copyright").css("bottom", "10px");
		    document.execCommand("stop");
		} else {
			setTimeout(function () {
				adjustWordsPosition();
				startHeartAnimation();
			}, 100);

			timeElapse(together, displayMode);
			setInterval(function () {
				timeElapse(together, displayMode);
			}, 500);

			adjustCodePosition();
			$("#code").typewriter();
		}
	</script>
<div class="head-warp">
  <div class="head">
        <div class="nav-box">
          <ul>
              <li class="cur" style="text-align:center; font-size:62px; font-family:'微软雅黑', '宋体';color:#fff">Love Memory</li>
          </ul>
        </div>
  </div>
</div>
<div class="main">
	<div class="history">
		<div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>04.14</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								那天
							</h4>
							<div class="wrap">
								<img src="photo/4.14.png">
								<p>那天，我们确定关系
								</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
		<div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>04.25</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								收到了花花！！
							</h4>
							<div class="wrap">
								<img src="photo/042501.jpg">
								<img src="photo/042502.jpg">
								<p>开心一整天
								</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>04.30-05.02</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								第一次异地见面
							</h4>
							<div class="wrap">
								<img src="photo/4.30.png">
								<img src="photo/043012.jpg">
								<img src="photo/043018.jpg">
								<p>那天我们在河边散步看到了万家灯火</p>
								<img src="photo/050201.jpg">
								<p>这条裙子真的特别合适(未购)</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>05.18-05.19</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								我们都是刚答辩完 安阳--&gt;新乡
							</h4>
							<div class="wrap">
								<img src="https://video-public.canva.cn/VAFBGAuKvVw/v/6e5163ef2e.gif">
								<img src="photo/051618.jpg">
								<img src="photo/051801.jpg">
								<img src="photo/050202.jpg">
								<img src="https://video-public.canva.cn/VAFBGPIXUAY/v/3c6ae60f21.gif">
								<p>我是科迪，你是小梅
								</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>06.01-06.07</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								臭宝正式毕业 耶耶耶
							</h4>
							<div class="wrap">
								<img src="photo/060501.jpg">
								<p>拍了美美的毕业照！
								</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>06.08</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								回家！
							</h4>
							<div class="wrap">
								<p>开心开心！
								</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>06.10</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								烤红薯烫着手了
							</h4>
							<div class="wrap">
								<p>我在网上各种找办法，还好烫的不严重</p>
								<p>冷水散热！！</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>06.19-06.22</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								臭宝从郑州来找我
							</h4>
							<div class="wrap">
								<p>路过合肥 天快下雨了</p>
								<img src="photo/062106.jpg">
								<p>一起坐地铁</p>
								<img src="photo/062104.jpg">
								<p>西湖灵隐寺</p>
								<img src="photo/062103.jpg">
								<p>宝 就夸我这一张拍的好看 嘎嘎嘎</p>
								<img src="photo/062102.jpg">
								<img src="photo/062101.jpg">
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>06.28</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								小毛病 没事没事
							</h4>
							<div class="wrap">
								<p>因为你，我的世界才精彩。</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>07.05</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								在家想找个活干干
							</h4>
							<div class="wrap">
								<img src="https://media-public.canva.cn/TluIU/MAEvU-TluIU/2/t.png">
								<p>郑州都是打电话，博士来了也得打</p>
								<img src="https://video-public.canva.cn/VAFKY4ILK6A/v/139a29c978.gif">
								<p>能体会到宝打电话很累</p>
								<img src="https://media-public.canva.cn/H-LE4/MAEceoH-LE4/2/tl.png">
								<p>凭知识获取金钱！去做家教咯</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>07.23</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								太想宝了必须回郑州
							</h4>
							<div class="wrap">
								<p>100天！</p>
								<img src="photo/072301.jpg">
								<p>送你回家后，我就去火车站了，那是第一次在郑州见面感觉特别匆匆，那一刻我真的意识到一定要努力赚钱回到你身边！！</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>08.29</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								宝子快要开学啦！
							</h4>
							<div class="wrap">
								<p>赶紧看看有什么需要的东西 ，提前准备</p>
								<img src="photo/23082902.jpg">
								<p>只能帮宝打个车去学校了！</p>
								<img src="photo/23082901.png">
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>10.01</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								这次直接两个月才见面
							</h4>
							<div class="wrap">
								<p>现在马上要去见在网上天天聊的妹子了hhhh</p>
								<img src="photo/23100101.jpg">
								<p>见面之前的彩虹</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>10.08</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								天气太干了，来个小水喷雾
							</h4>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>10.17</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								宿舍有矛盾了
							</h4>
							<div class="wrap">
								<p>积累的许多，在宿舍这种集体生活就是容易发生冲突</p>
								<p>想给宝找个外面的出租屋</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>11.12</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								北方太冷了
							</h4>
							<div class="wrap">
								<p>必须给宝安排个保暖衣</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>11.30</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								不知道怎么去安慰感觉只能给你多多陪伴
							</h4>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>12.03</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								生病了！
							</h4>
							<div class="wrap">
								<p>想过去照顾你，今天正好周五</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2023年</a></h2>
				<li class="green">
					<h3>12.06</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								以后生病的时候不要让宝喝茶之类的，也不能xxx
							</h4>
							<img src="https://media-public.canva.cn/iM1Qg/MAFkYciM1Qg/1/tl.png">
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2024年</a></h2>
				<li class="green">
					<h3>01.01</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								2024年啦
							</h4>
							<div class="wrap">
								<p>昨晚一起跨年！</p>
								<img src="https://media-public.canva.cn/XWi54/MAFi2FXWi54/1/tl.png" alt="">
								<p>我其实一开始都不相信坚定的选择，真的是太偶然了。我知道我不了解她！</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2024年</a></h2>
				<li class="green">
					<h3>01.12</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>一些总结</h4>
							<div class="wrap">
								<p>我还是很介意那种交流的，但是在这个世界看来是在正常不过了我知道是我的原因，以后慢慢的调整这种心态吧</p>
								<img src="	https://video-public.canva.cn/VAEwg9ar3Do/v/444301c1c6.gif" alt="">
								<p>写这些话的时候我不知道以后能走多久，也许有天真的会因为这个她对我有所‘规避’</p>
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2024年</a></h2>
				<li class="green">
					<h3>01.17</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>要来冬天的杭州了</h4>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2024年</a></h2>
				<li class="green">
					<h3>01.28</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								这次我们解决了很多很多问题
							</h4>
							<div class="wrap">
								<p>我问了自己一些问题，得到答案是：（需要宝亲自问我答案）</p>
								<img src="https://media-public.canva.cn/FscVk/MAE1nQFscVk/1/tl.png" alt="">
							</div>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
	    <div class="history-date">
	      	<ul>
				<h2 class="first"><a href="#nogo">2024年</a></h2>
				<li class="green">
					<h3>02.02</h3>
					<dl>
						<dt>
							<div class="feed_arrow">
							</div>
							<h4>
								最近开始晚上莫名其妙会因为想念而....
							</h4>
						</dt>
					</dl>
				</li>
			</ul>
	    </div><!-- .history-date -->
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/main.js"></script>

</body>
</html>