一个 个人 用的导航页面，显示效果挺好的
下面放图，放部分源码
附件里是完整的，如果需要使用的话请保留原作者的版权信息，
如需使用请自行修改index.html里的部分资源路径（刚刚压缩包里少了一个css，重新上传了，感谢刚刚那个细心的兄弟）
复制代码 隐藏代码<!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></body></style> </body> </html>
https://52sharew.lanzous.com/i0YKKkoj2vg