first commit
This commit is contained in:
214
WebRoot/jsp/visual/cityHallShow.jsp
Normal file
214
WebRoot/jsp/visual/cityHallShow.jsp
Normal file
@ -0,0 +1,214 @@
|
||||
<%@ page language="java" pageEncoding="UTF-8"%>
|
||||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
||||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
||||
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
||||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!-- <html lang="zh-CN"> -->
|
||||
<!-- BEGIN HEAD -->
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||||
<title>
|
||||
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||||
</title>
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
|
||||
<style type="text/css">
|
||||
.subject{
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background-image: url(<%=request.getContextPath()%>/IMG/cityHall/bg.png);
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
padding: 0 40px 40px 40px;
|
||||
}
|
||||
.subject-top{
|
||||
width: 100%;
|
||||
height: 95px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.subject-content{
|
||||
width: 100%;
|
||||
height: calc(100% - 95px);;
|
||||
border: 1px solid #00c2ff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 15px #00c2ff;
|
||||
}
|
||||
.subject-menu{
|
||||
position: absolute;
|
||||
bottom: 15%;
|
||||
left: 3%;
|
||||
z-index: 10;
|
||||
}
|
||||
#mainVideo,#listVideo{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: black;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.menu {
|
||||
cursor:pointer;
|
||||
}
|
||||
.menu , .menu-list{
|
||||
float: left;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.menu-list {
|
||||
display:none;
|
||||
z-index: 9;
|
||||
}
|
||||
.menu-list > img{
|
||||
float: left;
|
||||
}
|
||||
.menu-list-bg{
|
||||
z-index: 8;
|
||||
height: 70px;
|
||||
width: 300px;
|
||||
background: rgba(0,0,0,0.52);
|
||||
border-radius: 35px;
|
||||
}
|
||||
.menu-list-content{
|
||||
z-index: 7;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
width: 300px;
|
||||
}
|
||||
.menu-list-ele{
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.menu-list-ele >span{
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.listVideo{
|
||||
display:none;
|
||||
}
|
||||
.menu-list-text{
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var mainVideo ;
|
||||
var listVideo ;
|
||||
var tbName='tb_doc_file'; //数据表
|
||||
var tbName = 'tb_doc_file';
|
||||
var masterId_main = 'cityHallShow_main';
|
||||
var masterId_list = 'cityHallShow_list';
|
||||
$(function () {
|
||||
mainVideo = document.getElementById('mainVideo');
|
||||
listVideo = document.getElementById('listVideo');
|
||||
listVideo.addEventListener('ended', function () { //结束
|
||||
$("#listVideo").hide();
|
||||
$("#mainVideo").show();
|
||||
mainVideo.play();
|
||||
}, false);
|
||||
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_main,tbName : tbName} , function(data) {
|
||||
if(data.length>0){
|
||||
for(var i=0;i<data.length;i++){
|
||||
var id = data[i].id;
|
||||
var filename = data[i].filename;
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
if(i==0){
|
||||
mainVideo.src = src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},'json');
|
||||
$.post(ext.contextPath + '/cityHallShow/getFileList.do', { masterId : masterId_list,tbName : tbName} , function(data) {
|
||||
if(data.length>0){
|
||||
var width = 120*data.length;
|
||||
$(".menu-list-bg").width((width+80)+"px");
|
||||
$(".menu-list-content").width((width+70)+"px");
|
||||
for(var i=0;i<data.length;i++){
|
||||
var id = data[i].id;
|
||||
var filename = data[i].filename;
|
||||
var last=filename.lastIndexOf(".");
|
||||
if(last<0){
|
||||
last=filename.length;
|
||||
}
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
var htmlStr = '<div class="menu-list-ele" onclick="showVideo(\''+id+'\')" >'+
|
||||
'<div>'+
|
||||
'<img src="'+src+'" width="120" height="75"/>'+
|
||||
'</div>'+
|
||||
'<span class="menu-list-text" title="'+filename.substring(0,last)+'">'+filename.substring(0,last)+'</span>'+
|
||||
'</div>';
|
||||
$("#menu-list-content").append(htmlStr);
|
||||
}
|
||||
}
|
||||
},'json');
|
||||
$("#menu").click(function(){
|
||||
$(".menu-list").fadeToggle("slow");
|
||||
});
|
||||
|
||||
});
|
||||
function initialVideo(){
|
||||
listVideo.pause()
|
||||
$("#listVideo").hide();
|
||||
$("#mainVideo").show();
|
||||
mainVideo.play();
|
||||
}
|
||||
function showVideo(masterId){
|
||||
$("#mainVideo").hide();
|
||||
mainVideo.pause()
|
||||
$("#listVideo").show();
|
||||
$.post(ext.contextPath + '/base/getInputFileListById.do', { masterId : masterId,tbName:tbName} , function(data) {
|
||||
//console.info(data)
|
||||
if(data.length>0){
|
||||
var src= "";
|
||||
for(var i=0;i<data.length;i++){
|
||||
var path = data[i].abspath;
|
||||
path=path.substring(path.indexOf('webapps')+7,path.length);
|
||||
src =ext.basePath.replace(ext.contextPath,'')+ path.replace(/\\/g,"\/");
|
||||
if(i==0){
|
||||
listVideo.src = src;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},'json');
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="subject">
|
||||
<div class="subject-top" onclick="initialVideo()"></div>
|
||||
<div class="subject-content">
|
||||
<div class="subject-menu">
|
||||
<div id="menu" class="menu"><img src="<%=request.getContextPath()%>/IMG/cityHall/icon.png"/></div>
|
||||
<div class="menu-list">
|
||||
<div class="menu-list-bg"></div>
|
||||
<div class="menu-list-content" id="menu-list-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<video id="mainVideo" controls width="100%" height="100%" autoplay loop></video>
|
||||
<video id="listVideo" class="listVideo" controls width="100%" height="100%" autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user