博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

自制简易导航页

Posted on 2016-04-27 13:53  PHP-张工  阅读(2003)  评论(2)  编辑  收藏  举报

效果如下：

基本功能

网址访问统计，使用的HTML5本地存储。

单页面，很实用。

代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>公共导航页</title>
<style>
html, body{height:100%; width:100%; margin:0; padding:0;}
body {line-height:1.5; font-family: 微软雅黑; background:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));}
.nav {border:solid 1px #B8D4B8; margin-bottom:20px; border-radius: 5px; background-color: #fff;}
.nav:hover {box-shadow: 0 5px 30px #999;}
.nav h3 {margin:0; background-color:#B8D4B8; padding:5px 10px; font-weight:normal; font-size:16px;}
.nav h3 i {font-style:normal; padding-left:10px; color:red;}
.clear {clear:both; height:15px;}
.nav a {float:left; width:150px; margin-top:15px; margin-left:10px; text-align:center; text-decoration: none;}
.nav a:hover {text-decoration: none; color:red;}
.nav a i {font-style:normal; color:#999; font-size:9px; position: relative; top:-10px; left:0px; padding:1px 3px;}
</style>
<script src="http://libs.useso.com/js/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    $('.nav a').each(function(){
        var href = $(this).attr('href');
        var count = window.localStorage.getItem(href);
        count = count || 0;
        $(this).append('<i>' + count + '</i>');
        $(this).attr('target', '_blank');
        $(this).click(function(){
            var count = parseInt($(this).find('i').html()) + 1;
            $(this).find('i').html(count);
            window.localStorage.setItem(href, count);
            console.log(count);
        });
        $(this).hover(function(){
            $(this).parents('.nav').find('h3 i').html($(this).attr('href'));
        }, function(){
            $(this).parents('.nav').find('h3 i').html('');
        });
    });
});
</script>
</head>
<body>
<div style="max-width:1000px; margin:10px auto;">

<h3>公共导航页</h3>

<div class="nav">
<h3>★ 公共外网 <i></i></h3>
<a href="http://www.baidu.com">百度搜索</a>
<a href="http://fanyi.baidu.com/">百度翻译</a>
<a href="https://www.baidu.com/s?wd=qq&tn=baidulocal">百度无广告</a>
<a href="http://www.cnblogs.com">博客园</a>
<a href="http://www.zhihu.com/explore">知乎发现</a>
<a href="http://tech.163.com">163科技</a>
<a href="http://www.bootcss.com/">Bootstrap</a>
<div class="clear"></div>
</div>

<div class="nav">
<h3>★ 工作外网 <i></i></h3>
<a href="http://www.xxx.cn">RDC_V1</a>
<div class="clear"></div>
</div>

<div class="nav">
<h3>★ 内网调试 <i></i></h3>
<a href="http://www.z1.com">指纹识别_V1</a>
<a href="http://www.z2.com">大坝压实</a>
<a href="http://www.z3.com">库存管理</a>
<a href="http://www.z4.com">指纹识别_V3</a>
<a href="http://www.z5.com">设备监控</a>
<a href="http://www.z7.com">上海宏信</a>
<a href="http://www.z8.com">RDC运料监控</a>
<a href="http://www.z9.com">基础框架</a>
<div class="clear"></div>
</div>

</div>
</body>
</html>