一个单页导航

    选择打赏方式

原因:自己有些选七八糟的URL自己也记不住,所以...

来源:lab.mkblog.cn扣来的,靴微微修改了一下,方便自己~。

演示:https://itkz.cn/tools/daohang.html

代码:

<head>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<style>
/**************************************************
 * 我从mengkun(https://mkblog.cn)抄的
 * 前端样式参照了腾讯 alloyteam
 * 转载或复制代码时请保留出处,这是底线!
 *************************************************/
@charset "utf-8";*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:Microsoft Yahei,微软雅黑,Helvetica Neue,Helvetica,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif}body,html{width:100%;height:100%}a{text-decoration:none}a:focus{outline:none}img{border:none}.hidden{display:none}.container{max-width:1100px;margin:0 auto;position:relative}.mk-item-box{margin-left:-15px;margin-right:-15px}.mk-item-box:after,.mk-item-box:before{content:" ";display:table}.mk-item-box:after{clear:both}.mk-item{width:25%;float:left;padding-left:15px;padding-right:15px;position:relative}@media screen and (max-width:1150px){.container{width:950px}}@media screen and (max-width:1000px){.container{width:750px}.mk-item{width:50%}}@media screen and (max-width:800px){.container{width:100%;padding-left:30px;padding-right:30px}.welcome>p{font-size:20px}}@media screen and (max-width:600px){.container{padding-left:15px;padding-right:15px}.mk-item{width:100%}}.section{margin-top:30px;margin-bottom:10px;animation:rubberBand .8s}.mk-sub-title{text-align:center}.mk-sub-title>h4{font-size:50px;display:inline-block;position:relative;margin-bottom:10px}.mk-sub-title>h4:hover{animation:bounce 1s}@media screen and (-webkit-min-device-pixel-ratio:0){.mk-sub-title>h4{background:#eee url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow:5px -5px #000,4px -4px #fff;font-weight:700;-webkit-text-fill-color:transparent;-webkit-background-clip:text}}.mk-color-item{font-family:microsoft yahei;background-color:#70c3ff;padding:20px 10px;text-align:center;border-radius:4px;color:#fff;margin-bottom:25px;-webkit-transition:all .3s ease;transition:all .3s ease;overflow:hidden;cursor:pointer;position:relative}.mk-color-item:hover{transform:translateY(-6px);-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(0,36,100,.5);-webkit-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);-moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);animation:bounce .8s}.mk-color-item.color1{background-color:#70c3ff!important}.mk-color-item.color2{background-color:#fd6a7f!important}.mk-color-item.color3{background-color:#7f8ea0!important}.mk-color-item.color4{background-color:#89d04f!important}.mk-color-item.color5{background-color:#989!important}.mk-color-item.color6{background-color:#888069!important}.mk-color-item.color7{background-color:#ff9800!important}.mk-color-item.color8{background-color:#009688!important}.mk-color-item.color9{background-color:#00bcd4!important}.mk-color-item>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.mk-color-item>.item-logo{height:60px;overflow:hidden;display:inline-block}.mk-color-item>.item-logo>img{height:100%}.mk-color-item>.item-logo>.fa{font-size:60px;line-height:60px}.mk-color-item>h3{font-size:24px;margin-top:20px;margin-bottom:10px;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.mk-color-item>.light{cursor:pointer;position:absolute;left:-100%;top:0;width:100%;height:100%;background-image:-webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));transform:skewx(-25deg);-o-transform:skewx(-25deg);-moz-transform:skewx(-25deg);-webkit-transform:skewx(-25deg)}.mk-color-item:hover>.light{-webkit-transition:all .3s ease;transition:all .3s ease;left:100%}.social{font-size:60px;line-height:60px;margin-bottom:25px}.social>a{color:#fff;display:inline-block;position:relative}.social>a[href]:after,.social>a[href]:before{-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;opacity:0;display:none;left:50%;bottom:100%;-webkit-transform:translate3d(-50%,10px,0);transform:translate3d(-50%,10px,0);position:absolute}.social>a[href]:before{background:#222;background:rgba(0,0,0,.85);color:#f6f6f6;content:attr(mkpop);font-size:14px;height:32px;margin-bottom:15px;line-height:32px;padding:0 15px;text-shadow:0 1px 1px #000;white-space:nowrap;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px}.social>a[href]:hover:after,.social>a[href]:hover:before{display:block;opacity:1}@-webkit-keyframes bounce{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(.8) rotate(-2deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(2deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-2deg)}to{-webkit-transform:scale(1) rotate(0)}}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
</style>
</head>

<body>
<div class="container">
<section class="section">
<div class="mk-sub-title"><h4>资产管理</h4></div>  
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>安全工具</h4></div>  
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>翻越长城</h4></div>  
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>速度测试</h4></div>  
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>设备监控</h4></div>  
<div class="mk-item-box"></div>
</section>
</div><!---contaier end-->
<script type="text/javascript">
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; 
    } 
}
txt = {
	d0: [{
		url: "#",
		ico: "cog",
		title: "Esxi 6.7",
		dis: "Esxi登录"
	}, {
		url: "#",
		ico: "window-restore",
		title: "VirtualBox",
		dis: "VirtualBox管理"
	}, {
		url: "#",
		ico: "terminal",
		title: "Guacamole",
		dis: "远程登录管理"
	}, {
		url: "#",
		ico: "wifi",
		title: "Padavan",
		dis: "路由器登录"
	}, {
		url: "#",
		ico: "linux",
		title: "Appnode-Ali",
		dis: "Appnode管理面板"
	}, {
		url: "#",
		ico: "linux",
		title: "BT-Panel",
		dis: "宝塔Linux管理-Pro"
	}, {
		url: "#",
		ico: "linux",
		title: "Portainer",
		dis: "内网Docker管理"
	}, {
		url: "#",
		ico: "linux",
		title: "Portainer",
		dis: "外网Docker管理"
	}, {
		url: "#",
		ico: "server",
		title: "NextCloud",
		dis: "NextCloud-XXX"
	}, {
		url: "#",
		ico: "server",
		title: "KodExplorer",
		dis: "KodExplorer-XXX"
	}, {
		url: "#",
		ico: "server",
		title: "KodExplorer",
		dis: "KodExplorer-XXX"
	}, {
		url: "#",
		ico: "server",
		title: "HFS-Win",
		dis: "HttpFileServer-XXX"
	}],
	d1: [{
		url: "#",
		ico: "bug",
		title: "Acunetix 13",
		dis: "外网AWVS扫描器"
	}, {
		url: "#",
		ico: "search",
		title: "W12Scan",
		dis: "W12Scan Scanner by w8way"
	}, {
		url: "#",
		ico: "bug",
		title: "Nessus 8",
		dis: "Nessus Scanner"
	}, {
		url: "#",
		ico: "bug",
		title: "Kali Web",
		dis: "Kali Linux Web Tools"
	}],
	d2: [{
		url: "#",
		ico: "send",
		title: "Gyple-GAE",
		dis: "GAE搭建的Gyple代理"
	}, {
		url: "#",
		ico: "globe",
		title: "JSProxy",
		dis: "利用CloudFare实现JSProxy代理"
	}, {
		url: "#",
		ico: "send-o",
		title: "Gyple-Ru",
		dis: "俄罗斯的Gyple代理"
	}, {
		url: "#",
		ico: "send-o",
		title: "Gyple-Opi",
		dis: "在XXX上搭建Gyple"
	}],
	d3: [{
		url: "#",
		ico: "hourglass-end",
		title: "Speedtest",
		dis: "测速阿里云"
	}, {
		url: "#",
		ico: "hourglass-end",
		title: "Speedtest",
		dis: "测速俄罗斯"
	}, {
		url: "#",
		ico: "hourglass-end",
		title: "Speedtest",
		dis: "测速XXX"
	}, {
		url: "#",
		ico: "hourglass-end",
		title: "Speedtest",
		dis: "测速XXX"
	}],
	d4: [{
		url: "#",
		ico: "tachometer",
		title: "PHP-TZ-XXX",
		dis: "阿里云探针"
	}, {
		url: "#",
		ico: "tachometer",
		title: "PHP-TZ-XXX",
		dis: "香橙派探针"
	}, {
		url: "#",
		ico: "heartbeat",
		title: "ServerStatus",
		dis: "Linux服务器统一监测"
	}, {
		url: "#",
		ico: "tachometer",
		title: "Supervisor",
		dis: "Supervisor状态控制"
	}]
};
const lei = document.getElementsByClassName('mk-item-box');
console.log(lei);
for (var i = 0; i < lei.length; i++) {
	let dat=txt["d"+i];
	console.log("草拟"+dat.length);
	for (var j = 0; j < dat.length; j++) {


		lei[i].innerHTML += '<div class="mk-item"><a href="'+dat[j].url+'" target="_blank"><article><div class="item-logo"><i class="fa fa-'+dat[j].ico+'" aria-hidden="true"></i></div><h3>'+dat[j].title+'</h3><p>'+dat[j].dis+'</p><i class="light"></i></article></a></div>';
	}
	const len = document.getElementsByTagName('article');
	for (var k = 0; k < len.length; k++) {
    	len[k].className = 'mk-color-item color'+fRandomBy(1,9);
	}
}

</script>


版权声明:若无特殊注明,本文皆为《 CM部落 》原创,转载请保留文章出处。
本文链接:一个单页导航 https://itkz.cn/tools/136.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!