<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>K-Cat</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="Shortcut Icon" href="/images/index/tubiao.ico">
<script type="text/javascript" src="/jQuery/jquery.min.1.7.1.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('#nav').onePageNav({
begin: function() {
console.log('start');
},
end: function() {
console.log('stop');
},
scrollOffset: 30
});
});
</script>
</head>
<body>
<!-- nav开始 -->
<link href="/CSS/style.css" rel="stylesheet" type="text/css">
<link href="/CSS/nav.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/CSS/base/jquery.ui.css"/>
<script type="text/javascript" src="/jQuery/jquery.cookie.js"></script>
<script type="text/javascript" src="/jQuery/jquery.ui.js"></script>
<script type="text/javascript" src="/jQuery/jquery.form.js"></script>
<script type="text/javascript" src="/jQuery/jquery.validate.js"></script>
<script type="text/javascript" src="/jQuery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="/jQuery/jquery.nav.js"></script>
<script type="text/javascript">
$(function () {
$('#search_button').button({
icons : {
primary : 'ui-icon-search', //去除图标外按钮控件的空白区域
}
});
$('#member , #logout').hide(); //先隐藏掉登录用户名和退出用户
if ($.cookie('user')) {
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
$('#member').html($.cookie('user'));
} else{
$('#member, #logout').hide();
$('#reg_a, #login_a').show();
}
$('#logout').click(function () { //点击退出时刷新页面
$.removeCookie('user');
location.reload();
});
//表单验证时的加载动画
$('#loading').dialog({
autoOpen : false,
modal : true,
closeOnEscape : false,
resizable : false,
draggable : false,
width : 180,
height : 50,
}).parent().parent().find('.ui-widget-header').hide(); //将弹出框的头样式去掉
$('#reg').dialog({ //用户注册弹出框
title : 'K-Cat 用户注册',
width : 600,
height : 450,
show : true,
hide : true,
resizable : false,
modal : true,
closeText : '关闭',
autoOpen : false,
//提交按钮
buttons : {
'提交' : function () {
$(this).submit();
},
'取消':function(){
$(this).dialog('close');
}
}
}).buttonset().validate({
submitHandler : function (form) {
$(form).ajaxSubmit({
url : "/addUser.do",
type : 'POST',
async : false,
beforeSubmit : function (formData, jqForm, options) {
$('#loading').dialog('open');
$('#reg').dialog('widget').find('button').eq(1).button('disable');
},
success : function (responseText, statusText) {
if (responseText) {
$('#reg').dialog('widget').find('button').eq(1).button('enable');
$('#loading').css('background', 'url(.../images/nav/success.gif) no-repeat 20px center').html('用户注册成功...');
//验证成功后,在客户端生成一个名为user的cookie文件
$.cookie('user',$('#user').val());
setTimeout(function () {
$('#loading').dialog('close');
$('#reg').dialog('close');
$('#reg').resetForm();
$('#reg span.star').html('*').removeClass('succ');
$('#loading').css('background', 'url(.../images/nav/loading.gif) no-repeat 20px center').html('数据提交中...');
//刷新页面,用于显示用户名
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
$('#member').html($.cookie('user'));
}, 1000);
}
},
});
},
showErrors : function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors > 0) {
$('.reg').dialog('option', 'height', errors * 25 + 450);
} else {
$('.reg').dialog('option', 'height', 450);
}
this.defaultShowErrors();
},
highlight : function (element, errorClass) {
$(element).css('border', '1px solid red');
$(element).parent().find('span').html('*').removeClass('succ');
},
unhighlight : function (element, errorClass) {
$(element).css('border', '1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('succ');
},
errorLabelContainer : 'ol.reg_error',
wrapper : 'li',
rules : {
userName : {
required : true,
minlength : 2,
remote : {
url : '/checkUser.do',
type : 'POST',
},
},
userPwd : {
required : true,
minlength : 6,
},
repassword : {
required : true,
equalTo : '#password',
},
email : {
required : true,
email : true,
},
},
messages : {
userName : {
required : '账户不得为空!',
minlength : jQuery.format('账户长度不得小于{0}位!'),
remote : '帐号被占用!',
},
userPwd : {
required : '密码不得为空!',
minlength : jQuery.format('密码长度不得小于{0}位!'),
},
repassword : {
required : '请确认密码!',
equalTo : '密码不一致,请重新输入!',
},
email : {
required : '邮箱不得为空!',
email : '请输入正确的邮箱!',
},
},
});
$('#login').dialog({
title : 'K-Cat 用户登录',
width : 500,
height : 340,
show : true,
hide : true,
resizable : false,
modal : true,
closeText : '关闭',
autoOpen : false,
buttons : {
'登录' : function () {
$(this).submit();
},
'取消' : function () {
$(this).dialog('close');
}
}
}).validate({
submitHandler : function (form) {
$(form).ajaxSubmit({
url : '/login.do',
type : 'POST',
async : false,
beforeSubmit : function (formData, jqForm, options) {
$('#loading').dialog('open');
$('#login').dialog('widget').find('button').eq(1).button('disable');
},
success : function (responseText, statusText) {
if (responseText) {
$('#login').dialog('widget').find('button').eq(1).button('enable');
$('#loading').css('background', 'url(.../images/nav/success.gif) no-repeat 20px center').html('登录成功...');
if ($('#expires').is(':checked')) {
$.cookie('user', $('#login_user').val(), {
expires : 7,
});
} else {
$.cookie('user', $('#login_user').val());
}
setTimeout(function () {
$('#loading').dialog('close');
$('#login').dialog('close');
$('#login').resetForm();
$('#login span.star').html('*').removeClass('succ');
$('#loading').css('background', 'url(.../images/nav/loading.gif) no-repeat 20px center').html('数据交互中...');
$('#member, #logout').show();
$('#reg_a, #login_a').hide();
$('#member').html($.cookie('user'));
}, 1000);
}
},
});
},
showErrors : function (errorMap, errorList) {
var errors = this.numberOfInvalids();
if (errors > 0) {
$('#login').dialog('option', 'height', errors * 20 + 340);
} else {
$('#login').dialog('option', 'height', 340);
}
this.defaultShowErrors();
},
highlight : function (element, errorClass) {
$(element).css('border', '1px solid #630');
$(element).parent().find('span').html('*').removeClass('succ');
},
unhighlight : function (element, errorClass) {
$(element).css('border', '1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('succ');
},
errorLabelContainer : 'ol.login_error',
wrapper : 'li',
rules : {
login_user : {
required : true,
minlength : 2,
},
login_pass : {
required : true,
minlength : 6,
remote : {
url : '/login.do',
type : 'POST',
data : {
login_user : function () {
return $('#login_user').val();
},
},
},
},
},
messages : {
login_user : {
required : '帐号不得为空!',
minlength : jQuery.format('帐号不得小于{0}位!'),
},
login_pass : {
required : '密码不得为空!',
minlength : jQuery.format('密码不得小于{0}位!'),
remote : '帐号或密码不正确!',
}
}
});
$('#reg_a').click(function () {
$('.reg').dialog('open');
});
$('#login_a').click(function () {
$('#login').dialog('open');
});
$('.reg').buttonset();
// 日历UI插件
// $('#date').datepicker({ //引入日历插件,中文包位置:jquery-ui-1.10.4.custom/development-bundle/ui/i18n
// changeYear : true,
// changeMonth : true,
// showOn : 'button',
// buttonImage : 'images/nav/calendar.gif',
// buttonImageOnly : true,
// maxDate : 5, 限定最大日期
// minDate : -5, 限定最小日期
// hideIfNoPrevNext : true,
// yearRange : '1980 : 2020',
// yearSuffix : '', //去掉选择时的'年'字符导致换行的情况出现
// 日期的优先级:maxDate和minDate最高,而yearRange对年份限定优先级高
// });
// 工具提示功能,需要配合html页面的title属性来使用
// $('.reg input[title]').tooltip({
// tooltipClass : 'a', 用于更改title的样式,可在css中自定义样式
// position : {
// my : 'left center',
// at : 'right+5 center',
// },
// //默认提示是淡入淡出效果,项目中应去掉
// show : false,
// hide : false,
// });
// 邮箱自动补全功能模块
$('#email').autocomplete({
delay : 0,
autoFocus : true,
position:{
my : 'left top',
},
source : function (request, response) {
//获取用户输入的内容
//alert(request.term);
//绑定数据源的
//response(['aa', 'aaaa', 'aaaaaa', 'bb']);
var hosts = ['qq.com', '163.com', '263.com', 'sina.com.cn','gmail.com', 'hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名
host = '', //邮箱的域名
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
//当有@的时候,重新分别用户名和域名
if (ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) {
//如果用户已经输入@和后面的域名,
//那么就找到相关的域名提示,比如pjh@1,就提示pjh@163.com
//如果用户还没有输入@或后面的域名,
//那么就把所有的域名都提示出来
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1
}) : hosts),
findedResult = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
result = result.concat(findedResult);
}
response(result);
},
});
});
</script>
<div class="topbar">
<div class="wp">
<a href="/visitor/index.jsp" target="_parent" class="logo l" ></a>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<button id="search_button" style="height: 26px;">搜 索</button>
</div>
<ul id="nav" class="topnav l">
<li class="current"><a href="#section-1" style="display:none"></a></li>
<li><a class="juli" href="#section-2">专业软件</a></li>
<li><a href="#section-3">娱乐软件</a></li>
<li><a href="#section-4">作业辅助</a></li>
<li><a href="#section-5">帮帮帮</a></li>
<li><a href="#section-6">校园电话</a></li>
</ul>
<div class="header_member">
<a style="display: none" href="javascript:void(0)" id="reg_a">注册</a>
<a style="display: none" href="javascript:void(0)" id="member">用户 </a>
<a style="display: none" href="javascript:void(0)" id="login_a">登录</a>
<a style="display: none" href="javascript:void(0)" id="logout">退出</a>
</div>
</div>
</div>
<div id="loading" style="display: none;">数据交互中...</div>
<div id="error" style="display: none;">请登录后操作</div>
<!--注册表单-->
<form class="reg" id="reg" style="display: none;" >
<h1 class="reg_title">K-Cat用户注册</h1>
<div class="reg_main">
<p>
<label for="user">账号:</label>
<input type="text" name="userName" title="用户名 不得少于2位!" class="text" id="user" />
<span class="star">*</span>
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="userPwd" title="密码不得少于6位!" class="text" id="password" />
<span class="star">*</span>
</p>
<p>
<label for="repassword">确认密码:</label>
<input type="password" name="repassword" class="repassword" id="repassword" />
<span class="star">*</span>
</p>
<p>
<label for="sex">性别:</label>
<input type="radio" name="sex" id="nan" ><label for="nan">男</label></input>
<input type="radio" name="sex" id="nv" ><label for="nv">女</label></input>
</p>
<p>
<label for="email">邮箱:</label>
<input type="text" name="email" class="text" title="请输入正确的邮箱!" id="email" />
<span class="star">*</span>
</p>
<ol class="reg_error"></ol>
</div>
</form>
<!--用户登录表单-->
<form class="Login" id="login" style="display: none;" >
<h1 class="reg_title_2">K-Cat用户登录</h1>
<div class="reg_main_2">
<ol class="login_error"></ol>
<p>
<label for="user">帐号:</label>
<input type="text" name="userName" class="text" id="login_user" />
<span class="star">*</span>
</p>
<p>
<label for="pass">密码:</label>
<input type="password" name="userPwd" class="text" id="login_pass" />
<span class="star">*</span>
</p>
<p>
<input type="checkbox" name="expires" id="expires" checked="checked" /><label for="expires">登录后有效期一周</label>
</p>
</div>
</form>
<!-- nav结束 -->
<div id="container">
<div id="section-1" class="section"></div>
<div id="section-2" class="section">
<div class="wp">
<div class="tuwen">
<div class="tuwennr">
<h2 class="title">专业软件</h2>
<p class="info">在为找不到软件感到烦恼? / 在为软件自带病毒感到畏惧?<br>
<br>
这里有你需要的一切课程专业软件,如果你是小白,鼠标轻轻一点,从此告别病毒,如果你是大神,鼠标轻击,告别许多烦恼。<br>
<br>
科猫,只为更懂你。</p>
<p class="btnbar"><a class="btn-buy" href="/zhuanyeruanjian.do" target="_parent"><span class="paddingW"></span>点击进入>></a></p>
</div>
</div>
</div>
</div>
<div id="section-3" class="section">
<div class="wp">
<div class="tuwen">
<div class="tuwennr r">
<h2 class="title">娱乐软件</h2>
<p class="info">视频收费让你感到不爽? / 游戏太难让你无从下手?<br>
<br>
各种游戏的破解软件,更加丰富的视频资源软件,电脑登录忘记密码?老毛桃一键装机无脑破解。 这里总有一款可以帮到你的。<br>
<br>
科猫,只为更懂你。</p>
<p class="btnbar"><a class="btn-buy" href="/yuleruanjian.do" target="_parent"><span class="paddingW"></span>点击进入>></a></p>
</div>
</div>
</div>
</div>
<div id="section-4" class="section">
<div class="wp">
<div class="tuwen">
<div class="tuwennr">
<h2 class="title">作业辅助</h2>
<p class="info">在为明天的PPT感到迷茫?<br>
<br>
这里有海量的PPT模板素材,小白一秒变大神。<br>
<br>
科猫,只为更懂你。</p>
<p class="btnbar"><a class="btn-buy" href="/getHomework.do" target="_parent"><span class="paddingW"></span>点击进入>></a></p>
</div>
</div>
</div>
</div>
<div id="section-5" class="section">
<div class="wp">
<div class="tuwen">
<div class="tuwennr r">
<h2 class="title">帮帮帮</h2>
<p class="info">电脑又自启了? / 网线连不上?<br>
<br>
Photoshop,Dreamweaver,JAVA。。。来到帮帮帮,请各位专业老师免费教学,更多配套资源供你学习。 <br>
<br>
科猫,只为更懂你。</p>
<p class="btnbar"><a class="btn-buy" href="/bang.do" target="_parent"><span class="paddingW"></span>点击进入>></a></p>
</div>
</div>
</div>
</div>
<div id="section-6" class="section">
<div class="wp">
<div class="tuwen">
<div class="tuwennr">
<h2 class="title">校园电话</h2>
<p class="info">周末懒得出去吃饭? / 找不到快递电话?<br>
<br>
不用再问人,不用再百度,这里把周围的一切电话尽收囊中,只有你想找的,没有你找不到的。<br>
<br>
科猫,只为更懂你。</p>
<p class="btnbar"><a class="btn-buy" href="/getTel.do" target="_parent"><span class="paddingW"></span>点击进入>></a></p>
</div>
</div>
</div>
</div>
<!--footer部分-->
<div class="footer">
<div class="footer_1">
<h6 style="margin-bottom:5px;">联系我们:</h6>
<font>E-mail:1208984024@qq.com</font> <font>E-mail:908230189@qq.com</font> <font>E-mail:857493751@qq.com</font> </div>
<div class="footer_2" style="margin-top:10px;"> <a><font style="font-size:12px;">|</font>关于我们</a> <br/>
<a><font style="font-size:12px;">|</font>关于科猫</a> <br/>
<a><font style="font-size:12px;">|</font>关于科猫</a> </div>
<div class="footer_3"><font style="text-align:center;">Copyright © 2016 k-cat. All rights reserved. 仅供学习交流</font></div>
</div>
</div>
</body>
</html>
使用上面代码就可以做出前端效果