Skip to content

石磊 / cihai

Go to a project
Commit 67970052 by 石磊
Options

pc端调整完成

1 parent 415f9799
Expand all
Inline Side-by-side
Showing 21 changed files with 692 additions and 236 deletions
serverside/cihai-pc/src/main/java/com/dookay/cihai/pc/config/InterceptorConfig.java 0 → 100644
/*****************************************
* *
* @dookay.com Internet make it happen *
* ----------- ----------------------- *
* dddd ddddd Internet make it happen *
* o o o Internet make it happen *
* k k k Internet make it happen *
* a a a Internet make it happen *
* yyyy yyyyy Internet make it happen *
* ----------- ----------------------- *
* NO BUG ENJOY LIFE *
* *
****************************************/
package com.dookay.cihai.pc.config;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.PrintWriter;
import java.util.Objects;
/**
* @author 石磊
* @date 2018/5/18
*/
public class InterceptorConfig implements HandlerInterceptor {
private static final Logger log = LoggerFactory.getLogger(InterceptorConfig.class);
/**
* 进入controller层之前拦截请求
*
* @param httpServletRequest
* @param httpServletResponse
* @param o
* @return
* @throws Exception
*/
@Override
public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o) throws Exception {
// log.info("---------------------开始进入请求地址拦截----------------------------");
// HttpSession session = httpServletRequest.getSession();
// if (Objects.equals(session.getAttribute("userName"), "cihai2018")) {
// return true;
// } else {
// httpServletResponse.sendRedirect(httpServletRequest.getContextPath() + "/passport/login");
// return false;
// }
return true;
}
@Override
public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, ModelAndView modelAndView) throws Exception {
log.info("--------------处理请求完成后视图渲染之前的处理操作---------------");
}
@Override
public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o, Exception e) throws Exception {
log.info("---------------视图渲染之后的操作-------------------------0");
}
}
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/java/com/dookay/cihai/pc/config/WebMvcConfig.java 0 → 100644
package com.dookay.cihai.pc.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.ResourceUtils;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import java.util.Arrays;
/**
* Web config
*
* @author houkun
*/
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
/**
* 配置接口文档路径
*
* @param registry
* @author houkun
* @date 2017/12/23
*/
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new InterceptorConfig())
.addPathPatterns("/**")
.excludePathPatterns("/passport/login", "/static/**");
super.addInterceptors(registry);
}
}
serverside/cihai-pc/src/main/java/com/dookay/cihai/pc/controller/PassportController.java 0 → 100644
/*****************************************
* *
* @dookay.com Internet make it happen *
* ----------- ----------------------- *
* dddd ddddd Internet make it happen *
* o o o Internet make it happen *
* k k k Internet make it happen *
* a a a Internet make it happen *
* yyyy yyyyy Internet make it happen *
* ----------- ----------------------- *
* NO BUG ENJOY LIFE *
* *
****************************************/
package com.dookay.cihai.pc.controller;
import com.dookay.coral.common.web.controller.BaseController;
import com.dookay.coral.common.web.response.JsonResult;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import java.util.Objects;
/**
* @author 石磊
* @date 2018/5/18
*/
@Controller
@RequestMapping("/passport")
public class PassportController extends BaseController {
/**
* @author 石磊
* @date 2018/5/18
* @description 登录视图
*/
@RequestMapping(value = "/login", method = RequestMethod.GET)
public ModelAndView loginView() {
ModelAndView mv = new ModelAndView("/passport/login");
return mv;
}
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public JsonResult login(HttpServletRequest httpServletRequest,@RequestParam String userName) {
System.out.println(userName);
System.out.println(httpServletRequest);
if (!Objects.equals(userName, "cihai2018")) {
return errorResult("口令不正确");
}
httpServletRequest.getSession().setAttribute("userName", userName);
return successResult("登录成功");
}
}
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/home/index.jsp
...@@ -10,11 +10,17 @@ ...@@ -10,11 +10,17 @@
<link rel="stylesheet" href="/static/css1/vendor.css"> <link rel="stylesheet" href="/static/css1/vendor.css">
</head> </head>
<body> <body>
<div class="bg-video"> <div class="bg-video">
<video src="/static/temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video> <video src="/static/temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true"
<div class="bg-mask bg-mask-1"></div> webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls="false"></video>
<div class="bg-mask bg-mask-1"></div>
</div>
<div class="wrapper-index">
<div id="large-header">
<canvas id="demo-canvas" width="100%" height="100%"></canvas>
</div> </div>
<div class="wrapper-index"> <div class="content">
<div class="header clearfix"> <div class="header clearfix">
<div class="nav pull-left"> <div class="nav pull-left">
<a href="/annal/country">万国志</a> <a href="/annal/country">万国志</a>
...@@ -39,23 +45,22 @@ ...@@ -39,23 +45,22 @@
<button class="btn-search pull-left" type="submit" href="javascript:;"> <button class="btn-search pull-left" type="submit" href="javascript:;">
<span class="icon-search"></span> <span class="icon-search"></span>
</button> </button>
<a class="icon-camera" href="javascript:;"> <ul class="btn-sec clearfix">
<input name="image" type="file" class="j_search_image" style="opacity: 0;width:20px" accept=".png, .jpg, .jpeg"> <li><a class="icon-camera" href="javascript:;">
<input name="image" type="file" class="j_search_image" style="opacity: 0;width:20px"
accept=".png, .jpg, .jpeg">
</a></li>
<li><a class="icon-mic" href="javascript:;"></a></li>
</ul>
</a> </a>
<div class="decoration-box box-3"></div>
<div class="decoration-box box-2"></div>
<div class="decoration-box box-1"></div>
</div> </div>
<div class="radio-box clearfix"> <div class="search-wrap clearfix">
<label class="radio-inline"> <div class="search-help"><a href="javascript:;">高级检索</a><a href="javascript:;">搜索助手</a><span class="icon-mark">?</span></div>
<input type="radio" name="search-type" checked>词头</label>
<label class="radio-inline">
<input type="radio" name="search-type">全文</label>
<label class="radio-inline">
<input type="radio" name="search-type">图片</label>
<label class="radio-inline">
<input type="radio" name="search-type">视频</label>
<div class="search-help">
<span class="icon-mark">?</span>
<a href="javascript:;">搜索助手</a>
</div>
</div> </div>
</form> </form>
<div class="link-box clearfix"> <div class="link-box clearfix">
...@@ -65,34 +70,96 @@ ...@@ -65,34 +70,96 @@
<a class="today" href="/today"></a> <a class="today" href="/today"></a>
</div> </div>
</div> </div>
<script src="/static/js1/vendor.js" merge="true"></script> </div>
<script src="/static/js/plugins/jquery.min.js"></script> <script src="/static/js1/vendor.js" merge="true"></script>
<script src="/static/js/layer/layer.js"></script> <script src="/static/js/plugins/jquery.min.js"></script>
<script src="/static/js/plugins/validator/jquery.validator.js"></script> <script src="/static/js/layer/layer.js"></script>
<script src="/static/js/backend.js"></script> <script src="/static/js/plugins/validator/jquery.validator.js"></script>
<script> <script src="/static/js/backend.js"></script>
var $indexitemHover = $('.index-item-hover'); <script src="/static/js/home/EasePack.min.js"></script>
$('.index-item').hover(function() { <script src="/static/js/home/TweenLite.min.js"></script>
var $this = $(this), <script src="/static/js/home/rAF.js"></script>
_position = $this.position(); <script src="/static/js/home/demo-1.js"></script>
if (!$this.data('hover')) return; <style>
$indexitemHover.attr('src', $this.data('hover')).css({ .wrapper-index .search-box .btn-search {
'width': 0.3125 * $(window).width(), border: none;
'left': _position.left + $this.width() - 40, }
'top': _position.top + $this.height() - (0.4 * $this.height()),
'display': 'block' .content {
}) position: absolute;
}, function() { z-index: 1;
$indexitemHover.hide(); top: 0;
left: 0;
right: 0;
}
.wrapper-index .icon-camera {
right: 2.17rem;
}
</style>
<script>
var $indexitemHover = $('.index-item-hover');
$('.index-item').hover(function () {
var $this = $(this),
_position = $this.position();
if (!$this.data('hover')) return;
$indexitemHover.attr('src', $this.data('hover')).css({
'width': 0.3125 * $(window).width(),
'left': _position.left + $this.width() - 40,
'top': _position.top + $this.height() - (0.4 * $this.height()),
'display': 'block'
}) })
$(function(){ }, function () {
backEndApp.init(); $indexitemHover.hide();
var index; })
$('.j_search_form').ajaxSubmitForm({ $(function () {
before: function () { backEndApp.init();
index = layer.load(2, 5000); var index;
$('.j_search_form').ajaxSubmitForm({
before: function () {
index = layer.load(2, 5000);
},
success: function ($form, data) {
if (data.code === "OK") {
location.href = '/word/' + data.data.wordId;
}
else {
$.tip(data.message);
layer.close(index);
}
},
});
$('.j_search_image').change(function () {
var $this = $(this);
var $form = $this.closest('form');
if ($this.val() == null) {
return;
}
var index = layer.load(2, 10000);
$.ajax({
url: '/image/search',
type: 'POST',
data: new FormData($form[0]),
cache: false,
contentType: false,
processData: false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}, },
success: function ($form, data) { success: function (data) {
if (data.code === "OK") { if (data.code === "OK") {
location.href = '/word/' + data.data.wordId; location.href = '/word/' + data.data.wordId;
} }
...@@ -101,53 +168,13 @@ ...@@ -101,53 +168,13 @@
layer.close(index); layer.close(index);
} }
}, },
error: function () {
}); layer.close(index);
$('.j_search_image').change(function () { },
var $this = $(this);
var $form = $this.closest('form');
if ($this.val() == null) {
return;
}
var index = layer.load(2, 10000);
$.ajax({
url: '/image/search',
type: 'POST',
data: new FormData($form[0]),
cache: false,
contentType: false,
processData: false,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
},
success: function (data) {
if (data.code === "OK") {
location.href = '/word/' + data.data.wordId;
}
else {
$.tip(data.message);
layer.close(index);
}
},
error: function () {
layer.close(index);
},
});
}); });
});
}) })
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/include/header_search.jsp
...@@ -81,33 +81,33 @@ ...@@ -81,33 +81,33 @@
}); });
}); });
$('.album-alert .album-swiper .swiper-slide img').each(function(){ $('.album-alert .album-swiper .swiper-slide img').each(function () {
var $img = $(this); var $img = $(this);
var imgSrc = $img.attr("src"); var imgSrc = $img.attr("src");
getImageWidth(imgSrc,function(w,h){ getImageWidth(imgSrc, function (w, h) {
console.log({width:w,height:h}); console.log({width: w, height: h});
if(w > h){ if (w > h) {
$img.css('width', '100%') $img.css('width', '100%')
.css('position', 'absolute') .css('position', 'absolute')
.css('top', '50%') .css('top', '50%')
.css('transform','translateY(-50%)'); .css('transform', 'translateY(-50%)');
$img.parent().css('position', 'relative'); $img.parent().css('position', 'relative');
} }
else{ else {
$img.css('height', '100%').css('margin', 'auto'); $img.css('height', '100%').css('margin', 'auto');
} }
}); });
}); });
function getImageWidth(url,callback){ function getImageWidth(url, callback) {
var img = new Image(); var img = new Image();
img.src = url; img.src = url;
// 如果图片被缓存，则直接返回缓存数据 // 如果图片被缓存，则直接返回缓存数据
if(img.complete){ if (img.complete) {
callback(img.width, img.height); callback(img.width, img.height);
}else{ } else {
// 完全加载完毕的事件 // 完全加载完毕的事件
img.onload = function(){ img.onload = function () {
callback(img.width, img.height); callback(img.width, img.height);
} }
} }
...@@ -117,6 +117,7 @@ ...@@ -117,6 +117,7 @@
</script> </script>
</head> </head>
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
...@@ -130,11 +131,13 @@ ...@@ -130,11 +131,13 @@
<input class="form-control" type="text" placeholder="辞海云" name="keyword"> <input class="form-control" type="text" placeholder="辞海云" name="keyword">
<button class="btn navbar-search-camera" type="button"> <button class="btn navbar-search-camera" type="button">
<div class="icon icon-camera"> <div class="icon icon-camera">
<input name="image" type="file" class="j_search_image" style="opacity: 0;width: 100%;" accept=".png, .jpg, .jpeg"> <input name="image" type="file" class="j_search_image" style="opacity: 0;width: 100%;"
accept=".png, .jpg, .jpeg">
</div> </div>
<div class="icon icon-voice2"></div>
</button> </button>
<%--<button class="btn navbar-search-microphone" type="button">--%> <%--<button class="btn navbar-search-microphone" type="button">--%>
<%--<div class="icon icon-microphone"></div>--%> <%--<div class="icon icon-microphone"></div>--%>
<%--</button>--%> <%--</button>--%>
</div> </div>
<button class="btn btn-inverse btn-lg" type="submit">进入词条</button> <button class="btn btn-inverse btn-lg" type="submit">进入词条</button>
...@@ -159,12 +162,12 @@ ...@@ -159,12 +162,12 @@
</div> </div>
</form> </form>
<%--<ul class="nav navbar-nav navbar-right">--%> <%--<ul class="nav navbar-nav navbar-right">--%>
<%--<li>--%> <%--<li>--%>
<%--<a class="btn btn-primary" href="#">登录</a>--%> <%--<a class="btn btn-primary" href="#">登录</a>--%>
<%--</li>--%> <%--</li>--%>
<%--<li>--%> <%--<li>--%>
<%--<a class="btn btn-default" href="#">注册</a>--%> <%--<a class="btn btn-default" href="#">注册</a>--%>
<%--</li>--%> <%--</li>--%>
<%--</ul>--%> <%--</ul>--%>
</div> </div>
</div> </div>
......
serverside/cihai-pc/src/main/webapp/WEB-INF/jsp/passport/login.jsp 0 → 100644
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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">
<title>辞海云</title>
<link rel="stylesheet" href="/static/css1/vendor.css">
</head>
<body>
<span></span>
<div>
<form action="/passport/login">
口令：<input type="text" name="userName">
<button type="submit">提交</button>
</form>
</div>
<style>
span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
div {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 246px;
display: inline-block;
vertical-align: middle;
}
</style>
<script src="/static/js1/vendor.js" merge="true"></script>
<script src="/static/js/plugins/jquery.min.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script>
$(function () {
$('form').submit(function (e) {
e.preventDefault();
var $this = $(this);
$.post($this.attr("action"), $this.serialize(), function (res) {
if (res.code == "OK") {
location.href = "/";
} else {
layer.alert(res.message);
}
})
})
})
</script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/css/index.css
body,html{height:100%}.wrapper-index{position:relative;height:100%;min-height:770px;background:url(../images/bg-index.jpg) top center no-repeat}.wrapper-index .navbar-default{padding:40px 0}.wrapper-index .navbar-default,.wrapper-index .navbar-default .navbar-collapse{background-color:transparent;border-color:transparent}.wrapper-index .navbar-nav{top:18px}.wrapper-index .navbar-form .navbar-main-list{margin-top:20px}.wrapper-index .brand-index{position:absolute;left:40px;top:40px;z-index:2}.wrapper-index .brand-index .logo{float:left;display:block;height:88px}.wrapper-index .brand-index .logo img{height:100%}.wrapper-index .brand-index .hot-tags{float:left;margin-left:20px;font-size:30px;margin-top:15px}.wrapper-index .brand-index .hot-tags a{color:#666;margin-left:20px}.wrapper-index .brand-index .hot-tags a:hover{color:#187bb2}.wrapper-index .search-main{padding-top:400px}.wrapper-index .search-main .navbar-form{width:775px;position:relative}.wrapper-index .search-main .navbar-form input:focus{outline:0}.wrapper-index .search-main .navbar-form .btn-link{position:absolute;right:-35px;margin-top:10px}.wrapper-index .search-main .navbar-form .logo-search{position:relative;top:-30px;text-align:center;width:380px;height:80px;margin:0 auto 30px}.wrapper-index .search-main .navbar-form .logo-search img{display:inline-block}.wrapper-index .push-main{padding:0 50px}.wrapper-index .push-main .footer-main .qr{float:right;margin-top:-2px}.wrapper-index .push-main .footer-main .qr a:hover .icon-qr{background-image:url(../images/sprite-2.png);background-position:0 0}.wrapper-index .push-main .footer-main .copyright{text-align:left}.wrapper-index .search-main-input-wrapper{position:relative;float:left;padding:0 6px 4px 0;background:url(../images/right.png) right 0 no-repeat}.wrapper-index .search-main-input-wrapper .search-main-input-inner{padding:0 0 6px 0;background:url(../images/bottom.png) 4px bottom no-repeat}.wrapper-index .search-main-input-img{position:absolute;left:-60px;bottom:100%}.btn-search{border:none;width:160px!important;height:75px!important;outline:0;background:url(../images/btn-search.png) center no-repeat}.btn-search:active,.btn-search:focus{background:url(../images/btn-search.png) center no-repeat}.navbar-form .form-group{padding:13px 0!important}.container-fluid .navbar-form .form-group{border-color:#c13633}@media (min-width:1400px){.wrapper-index .navbar-form .navbar-main-list{width:103%;font-size:22px;line-height:30px}.wrapper-index .navbar-form .navbar-main-list .icon-search{margin-top:-4px}.wrapper-index .navbar-form .navbar-main-list a{margin:0 18px}.wrapper-index .navbar .navbar-form{width:1005px}}@media (max-width:1400px){.wrapper-index .container .navbar-form .form-group,.wrapper-index .container-fluid .navbar-form .form-group{width:531px}.wrapper-index .container .navbar-form .form-group .form-control,.wrapper-index .container-fluid .navbar-form .form-group .form-control{width:441px!important}.wrapper-index .container .navbar-form .form-group .btn,.wrapper-index .container-fluid .navbar-form .form-group .btn{width:38px}.wrapper-index .push-main{padding:0 40px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:0}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0 10px}}@media (max-width:1200px){.container-fluid .navbar-header{margin-left:-10px}.container-fluid .navbar-collapse{margin-right:0}.wrapper-index .push-main{padding:0}}.word{position:relative;top:30px;height:174px;background-position:center;background-repeat:no-repeat;background-size:contain;background-image:url(../images/ciyun3.png)}.calendar{position:absolute;right:0;top:0}.container-fluid .navbar-links{padding:15px 10px 40px;font-size:16px}.container-fluid .navbar-links>a{color:#999;margin-right:20px}.container-fluid .navbar-links>a:hover{color:#187bb2}.navbar-search-camera{margin-left:30px}
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/css1/vendor.css
This diff could not be displayed because it is too large.
serverside/cihai-pc/src/main/webapp/static/index.html
...@@ -4,142 +4,80 @@ ...@@ -4,142 +4,80 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<title>搜索</title> <title>index</title>
<link rel="stylesheet" href="css/vendor.css"> <link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/index.css">
</head> </head>
<body> <body>
<div class="bg-video">
<video src="temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
<div class="bg-mask bg-mask-1"></div>
</div>
<div class="wrapper-index"> <div class="wrapper-index">
<div class="brand-index"> <div class="header clearfix">
<a class="logo" href="index.html"> <div class="nav pull-left">
<img src="images/logo.png"> <a href="javascript:;">万国志</a>
</a> <i>/</i>
<div class="hot-tags"> <a href="javascript:;">地方志</a>
<a href="万国志.html">万国志</a> <i>/</i>
<a href="地方志.html">地方志</a> <a href="javascript:;">人物志</a>
<a href="人物志.html">人物志</a> </div>
<a href="#">专题</a> <div class="login pull-right">
<a class="active" href="javascript:;">登录</a>
<a href="javascript:;">注册</a>
</div> </div>
</div> </div>
<a class="calendar" href="历史上的今天.html"> <div class="logo">
<img src="images/calendar2.png" alt="历史上的今天" title="历史上的今天"> <img src="images/logo-search2.png" title="云辞海">
</a> </div>
<div class="container-fluid search-main"> <div class="search-box clearfix">
<form class="navbar-form clearfix"> <div class="input-group">
<div class="logo-search"> <input class="form-control" placeholder="输入关键词搜索">
<img class="img-responsive" src="images/logo-search2.png">
</div>
<div class="search-main-input-wrapper">
<img class="search-main-input-img" src="images/bg-dog.png" alt="">
<div class="search-main-input-inner clearfix">
<div class="form-group input-group-lg">
<input class="form-control" type="text">
<button class="btn navbar-search-camera" type="button">
<div class="icon icon-camera"></div>
</button>
</div>
<button class="btn btn-search btn-lg" type="button"></button>
</div>
</div>
<a class="btn btn-link btn-lg" type="button">搜索助手
<span class="icon icon-help"></span>
</a>
</form>
<div class="navbar-links navbar-form">
<label class="radio-inline">
<input type="radio" name="search-type" checked>词头</label>
<label class="radio-inline">
<input type="radio" name="search-type">全文</label>
<label class="radio-inline">
<input type="radio" name="search-type">图片</label>
<label class="radio-inline">
<input type="radio" name="search-type">视频</label>
</div> </div>
<button class="btn-search pull-right" href="javascript:;">
<span class="icon-search"></span>
</button>
<a class="icon-camera" href="javascript:;"></a>
<div class="decoration-box box-3"></div>
<div class="decoration-box box-2"></div>
<div class="decoration-box box-1"></div>
</div> </div>
<div class="push-main"> <div class="radio-box clearfix">
<div class="container-fluid"> <label class="radio-inline">
<div class="row"> <input type="radio" name="search-type" checked>词头</label>
<div class="col-lg-11 col-lg-push-6 col-xs-24"> <label class="radio-inline">
<div class="card"> <input type="radio" name="search-type">全文</label>
<div class="card-title">每日一字</div> <label class="radio-inline">
<div class="card-title">推荐词条</div> <input type="radio" name="search-type">图片</label>
<div class="card-main"> <label class="radio-inline">
<div class="card-col card-character"> <input type="radio" name="search-type">视频</label>
<div class="card-character-main"> <div class="search-help">
<a href="javascript:;">象</a> <span class="icon-mark">?</span>
<div class="card-character-voice"> <a href="javascript:;">搜索助手</a>
<div class="icon icon-horn"></div>
</div>
</div>
<div class="card-character-date">2018/01/2</div>
</div>
<div class="card-col card-word">
<div class="card-word-content">
<div class="card-word-desc">一年中地球绕太阳运行到二十四个规定位置（即视太阳黄经度每隔15°为一个节气）上的日期。</div>
<div class="card-word-metas">对联 / 福 / 中秋节 / 团圆节</div>
</div>
<div class="card-word-value">
<a href="#">二十四节气</a>
</div>
<div class="card-word-share">
<div class="icon icon-share"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-lg-pull-11 col-xs-12">
<div class="card">
<div class="card-title">知识专题</div>
<div class="card-main">
<div class="theme clearfix">
<a class="theme-cell" href="javascript:;">心脏</a>
<br>
<a class="theme-cell" href="javascript:;">中国历史朝代</a>
<br>
<a class="theme-cell" href="javascript:;">中国特色社会主义</a>
<a class="theme-refresh" href="javascript:;">
<div class="icon icon-refresh"></div>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-7 col-xs-12">
<div class="card">
<div class="card-title">词云</div>
<div class="card-main">
<div class="word"></div>
</div>
</div>
</div>
</div>
<footer class="footer-main">
<div class="qr">
<a href="#">
<span class="icon icon-qr"></span>
</a>
</div>
<p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
<a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
</p>
</footer>
</div> </div>
</div> </div>
<div class="link-box clearfix">
<a class="knowledge" href="http://cihai-pc.beckee.cn/word/592"></a>
<a class="word" href="http://cihai-pc.beckee.cn/word/1"></a>
<a class="cloud" href="javascript:;"></a>
<a class="today" href="http://cihai-pc.beckee.cn/today"></a>
</div>
</div> </div>
<script src="js/plugins/jquery.min.js"></script> <script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script> <script src="js/vendor.js" merge="true"></script>
<script> <script>
var ciyun = ['ciyun', 'ciyun2', 'ciyun3'] var $indexitemHover = $('.index-item-hover');
$('.index-item').hover(function() {
function getRandomInt(min, max) { var $this = $(this),
min = Math.ceil(min); _position = $this.position();
max = Math.floor(max); if (!$this.data('hover')) return;
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive $indexitemHover.attr('src', $this.data('hover')).css({
} 'width': 0.3125 * $(window).width(),
var ran = getRandomInt(0, 3) 'left': _position.left + $this.width() - 40,
$(".word").css({ 'top': _position.top + $this.height() - (0.4 * $this.height()),
"background-image": "url(./images/" + ciyun[ran] + ".png)" 'display': 'block'
})
}, function() {
$indexitemHover.hide();
}) })
</script> </script>
</body> </body>
......
serverside/cihai-pc/src/main/webapp/static/index2.html 0 → 100644
<!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">
<title>index2</title>
<link rel="stylesheet" href="css/vendor.css">
</head>
<body>
<div class="bg-video">
<video src="temp/kongjian.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
<div class="bg-mask bg-mask-2"></div>
</div>
<div class="wrapper-index">
<div class="index-top-left">
<img src="images/index-2-top-left.png" draggable="false">
</div>
<div class="index-top-right index-top-right-2">
<img src="images/index-2-top-right.png" draggable="false">
</div>
<div class="index-search index-search-2">
<img src="images/index-2-search.png" draggable="false">
</div>
<div class="index-item index-2-item">
<img src="images/index-2-item-1.png" draggable="false">
<img src="images/index-2-item-2.png" draggable="false">
<img src="images/index-2-item-3.png" draggable="false">
<img src="images/index-2-item-4.png" draggable="false">
</div>
</div>
<script src="js/plugins/jquery.min.js"></script>
<script src="js/vendor.js" merge="true"></script>
</body>
</html>
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/home/EasePack.min.js 0 → 100644
/*!
* VERSION: beta 1.9.4
* DATE: 2014-07-17
* UPDATES AND DOCS AT: http://www.greensock.com
*
* @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
* This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
* Club GreenSock members, the software agreement that was issued with your membership.
*
* @author: Jack Doyle, jack@greensock.com
**/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/home/demo-1.js 0 → 100644
(function () {
var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
// Main
initHeader();
initAnimation();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: width / 2, y: height / 2};
largeHeader = document.getElementById('large-header');
largeHeader.style.height = height + 'px';
canvas = document.getElementById('demo-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create points
points = [];
for (var x = 0; x < width; x = x + width / 20) {
for (var y = 0; y < height; y = y + height / 20) {
var px = x + Math.random() * width / 20;
var py = y + Math.random() * height / 20;
var p = {x: px, originX: px, y: py, originY: py};
points.push(p);
}
}
// for each point find the 5 closest points
for (var i = 0; i < points.length; i++) {
var closest = [];
var p1 = points[i];
for (var j = 0; j < points.length; j++) {
var p2 = points[j]
if (!(p1 == p2)) {
var placed = false;
for (var k = 0; k < 5; k++) {
if (!placed) {
if (closest[k] == undefined) {
closest[k] = p2;
placed = true;
}
}
}
for (var k = 0; k < 5; k++) {
if (!placed) {
if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
closest[k] = p2;
placed = true;
}
}
}
}
}
p1.closest = closest;
}
// assign a circle to each point
var textList = ['鲁迅', '文学革命', '新青年', '蔡元培', '冯雪峰', '瞿秋白', '柔石', '萧红', '萧军', '郁达夫', '内山完造'];
for (var i in points) {
var num=Math.floor(Math.random()*textList.length);
var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)', textList[num]);
points[i].circle = c;
}
}
// Event handling
function addListeners() {
if (!('ontouchstart' in window)) {
window.addEventListener('mousemove', mouseMove);
}
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function mouseMove(e) {
var posx = posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
target.x = posx;
target.y = posy;
}
function scrollCheck() {
if (document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height + 'px';
canvas.width = width;
canvas.height = height;
}
// animation
function initAnimation() {
animate();
for (var i in points) {
shiftPoint(points[i]);
}
}
function animate() {
if (animateHeader) {
ctx.clearRect(0, 0, width, height);
for (var i in points) {
// detect points in range
if (Math.abs(getDistance(target, points[i])) < 4000) {
points[i].active = 0.3;
points[i].circle.active = 0.6;
} else if (Math.abs(getDistance(target, points[i])) < 20000) {
points[i].active = 0.1;
points[i].circle.active = 0.3;
} else if (Math.abs(getDistance(target, points[i])) < 40000) {
points[i].active = 0.02;
points[i].circle.active = 0.1;
} else {
points[i].active = 0;
points[i].circle.active = 0;
}
drawLines(points[i]);
points[i].circle.draw();
}
}
requestAnimationFrame(animate);
}
function shiftPoint(p) {
TweenLite.to(p, 1 + 1 * Math.random(), {
x: p.originX - 50 + Math.random() * 100,
y: p.originY - 50 + Math.random() * 100, ease: Circ.easeInOut,
onComplete: function () {
shiftPoint(p);
}
});
}
// Canvas manipulation
function drawLines(p) {
if (!p.active) return;
for (var i in p.closest) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.closest[i].x, p.closest[i].y);
ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
ctx.stroke();
}
}
function Circle(pos, rad, color, text) {
var _this = this;
// constructor
(function () {
_this.pos = pos || null;
_this.radius = rad || null;
_this.color = color || null;
})();
this.draw = function () {
if (!_this.active) return;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')';
ctx.fillText(text, _this.pos.x, _this.pos.y);
ctx.fill();
};
}
// Util
function getDistance(p1, p2) {
return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
}
})();
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/home/rAF.js 0 → 100644
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
\ No newline at end of file \ No newline at end of file
serverside/cihai-pc/src/main/webapp/static/js/vendor.js
This diff could not be displayed because it is too large.
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!