178 lines
5.6 KiB
HTML
178 lines
5.6 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>Web 导航 Web 实验室</title>
|
|||
|
|
<meta name="keywords" content="网页实验室,Web 实验室,博客">
|
|||
|
|
<!--修改这里的路径-->
|
|||
|
|
<!-- font-awesome 图标字体 -->
|
|||
|
|
<link media="screen" rel="stylesheet" type="text/css">
|
|||
|
|
<!--修改这里的路径-->
|
|||
|
|
<!-- 实验室核心样式文件 -->
|
|||
|
|
<link rel="stylesheet" >
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<header class="header">
|
|||
|
|
<!-- 动画展示区域 -->
|
|||
|
|
<div id="victor-container"><div id="victor-output"></div></div>
|
|||
|
|
|
|||
|
|
<div class="welcome">
|
|||
|
|
<p>— 欢迎访问 —</p>
|
|||
|
|
<!--修改这里的路径 LOGO-->
|
|||
|
|
<img class="web-title" src="http://hc.********/bg.png" alt="Web 实验室" draggable="false"
|
|||
|
|
onerror="onerror=null;src='http://hc.********/bg.png'">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!--向下滚动提示-->
|
|||
|
|
<a class="scroll-down-tips" href="#product">
|
|||
|
|
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
|
|||
|
|
向下滚动
|
|||
|
|
</a>
|
|||
|
|
</header> <!-- header -->
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
|
|||
|
|
<section class="section">
|
|||
|
|
|
|||
|
|
<a name="product"></a>
|
|||
|
|
<h3 class="mk-sub-title">
|
|||
|
|
<span>Product</span>
|
|||
|
|
<span>/</span>
|
|||
|
|
原创作品
|
|||
|
|
</h3>
|
|||
|
|
|
|||
|
|
<p class="mk-title-describe">没错，这些都是我的原创作品</p>
|
|||
|
|
<!--修改这里 自己添加自己的网站链接-->
|
|||
|
|
<div class="mk-item-box">
|
|||
|
|
|
|||
|
|
<div class="mk-item">
|
|||
|
|
<a href="/music/" target="_blank">
|
|||
|
|
<article class="mk-color-item color2">
|
|||
|
|
<div class="item-logo">
|
|||
|
|
<i class="fa fa-music" aria-hidden="true"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>歌曲搜索</h3>
|
|||
|
|
<p>基于第三方API 的音乐搜索引擎</p>
|
|||
|
|
<i class="light"></i>
|
|||
|
|
</article>
|
|||
|
|
</a>
|
|||
|
|
</div> <!-- mk-item -->
|
|||
|
|
|
|||
|
|
<div class="mk-item">
|
|||
|
|
<a target="_blank">
|
|||
|
|
<article class="mk-color-item color1">
|
|||
|
|
<div class="item-logo">
|
|||
|
|
<i class="fa fa-film" aria-hidden="true"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>免费影视</h3>
|
|||
|
|
<p>基于第三方API 的影视网站</p>
|
|||
|
|
<i class="light"></i>
|
|||
|
|
</article>
|
|||
|
|
</a>
|
|||
|
|
</div> <!-- mk-item -->
|
|||
|
|
|
|||
|
|
<div class="mk-item">
|
|||
|
|
<a href="/qrcode/" target="_blank">
|
|||
|
|
<article class="mk-color-item color3">
|
|||
|
|
<div class="item-logo">
|
|||
|
|
<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3>给我充充电吧！！</h3>
|
|||
|
|
<p>午饭能不能吃好，全靠它啦！</p>
|
|||
|
|
<i class="light"></i>
|
|||
|
|
</article>
|
|||
|
|
</a>
|
|||
|
|
</div> <!-- mk-item -->
|
|||
|
|
|
|||
|
|
</div> <!-- mk-item-box -->
|
|||
|
|
|
|||
|
|
</section> <!-- class="section" -->
|
|||
|
|
|
|||
|
|
<section class="section"> <!-- class="section" -->
|
|||
|
|
<div class="mk-big-title">
|
|||
|
|
<h4>About</h4>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="about-content">
|
|||
|
|
<p>Web 实验室用来陈列一些新鲜、好玩的 Html 作品。这些作品中，有一些是本人原创或改写的，
|
|||
|
|
还有一些是别人的开源大作，但因其很有特色，值得学习玩味，因此也出现在这里。</p>
|
|||
|
|
|
|||
|
|
<p>本人崇尚开源精神，因此“实验室”中大部分作品是开源的。
|
|||
|
|
即使没有开源，您也可以通过右键>查看源代码以进行查阅。
|
|||
|
|
请注意，开源不代表可以滥用，转载或使用这些源代码时，请务必保留原始的版权信息！
|
|||
|
|
这是一个程序员最基本的修养，也是对原作者最起码的尊重。</p>
|
|||
|
|
|
|||
|
|
<p>欲了解更多内容，请访问我的 <a target="_blank">个人博客</a>。</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
</div> <!-- class=container -->
|
|||
|
|
|
|||
|
|
<footer class="footer">
|
|||
|
|
<p>Copyright (c) 2019. Design by
|
|||
|
|
<a href="#http://my.********" rel="nofollow">Web 导航</a>.</p>
|
|||
|
|
<p>ICP证：<a target="_blank">ICP备********号</a></p>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<!-- 返回顶部 -->
|
|||
|
|
<div class="mk-uptop" title="点击返回顶部"></div>
|
|||
|
|
|
|||
|
|
<!-- jq -->
|
|||
|
|
<!--修改这里的路径-->
|
|||
|
|
<script src="http://hc.********/jquery.min.js"></script>
|
|||
|
|
<script src="http://hc.********/vector.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
$(function(){
|
|||
|
|
|
|||
|
|
// 页面加载完毕后固定页头高度，防止在某些自动隐藏工具栏的移动浏览器上出现页面抖动现象
|
|||
|
|
$(".header").height($(window).height());
|
|||
|
|
|
|||
|
|
// 初始化 传入dom id
|
|||
|
|
var victor = new Victor("victor-container", "victor-output");
|
|||
|
|
var theme = [
|
|||
|
|
["#002c4a", "#005584"],
|
|||
|
|
["#35ac03", "#3f4303"],
|
|||
|
|
["#ac0908", "#cd5726"],
|
|||
|
|
["#18bbff", "#00486b"]
|
|||
|
|
];
|
|||
|
|
var color = theme[fRandomBy(0, 3)];
|
|||
|
|
victor(color).set();
|
|||
|
|
|
|||
|
|
// 监听滚动变化
|
|||
|
|
$(window).scroll(function() {
|
|||
|
|
if($(window).scrollTop() < 300) {
|
|||
|
|
$(".mk-uptop").removeClass("show");
|
|||
|
|
} else {
|
|||
|
|
$(".mk-uptop").addClass("show");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 返回顶部
|
|||
|
|
$(".mk-uptop").click(function(){
|
|||
|
|
$("html, body").animate({scrollTop:0}, "normal");
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 烦人的 CNZZ，输出一大堆错误信息、、清除掉！
|
|||
|
|
console.clear();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/*******************************
|
|||
|
|
* 函数名：生成指定范围的随机数
|
|||
|
|
* 输入： (under)下限 (over)上限
|
|||
|
|
* 输出： 所需要的数值
|
|||
|
|
* *****************************/
|
|||
|
|
function fRandomBy(under, over) {
|
|||
|
|
switch(arguments.length){
|
|||
|
|
case 1: return parseInt(Math.random()*under+1);
|
|||
|
|
case 2: return parseInt(Math.random()*(over-under+1) + under);
|
|||
|
|
default: return 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|