p42689073
/
geo_info_platform
forked from p51497208/geo_info_platform
1
0
Fork 0
Code Issues Pull Requests 1 Releases 1 Wiki Activity

视频

This commit is contained in:
caicai8 2019-12-20 16:50:33 +08:00
parent 895554f883
commit e019ac3b59
6 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/demo.css
View File

@ -103,7 +103,7 @@ body{
position: relative; position: relative;
height: 40%; height: 40%;
} }
.screen-btn{ .screen-btn,.photo_icon{
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 15px; top: 15px;

18
css/slider.css
View File

@ -1,13 +1,27 @@
/*********************************/ /*********************************/
.slider_panel{
position: relative;
height: 40%;
}
.silider_panel_from{
position: relative;
height: 100%;
}
.slider_one_big_picture { .slider_one_big_picture {
position: relative; position: relative;
width: 100%; width: 100%;
height: 40%; height: 100%;
margin: 0 auto; margin: 0 auto;
user-select: none; user-select: none;
/*overflow: hidden;*/ /*overflow: hidden;*/
} }
.slider_panel.active .silider_panel_from{
position: fixed;
z-index: 1000000;
top: 60px;
height: 100%;
width: 100%;
}
.slider_one_big_picture > * { .slider_one_big_picture > * {
transition: ease all 1s; transition: ease all 1s;

BIN
image/班公湖/1.mp4 Normal file
View File

Binary file not shown.

1
js/demo.js
View File

@ -44,6 +44,7 @@ $(document).ready(function () {
// 收缩左侧侧边栏 // 收缩左侧侧边栏
$('.collpase-icon').on('click', function() { $('.collpase-icon').on('click', function() {
$(".slider_panel").removeClass("active");
if ($('.fixed-left').hasClass('active')) return; if ($('.fixed-left').hasClass('active')) return;
showOrHideSlider(); showOrHideSlider();
// $(this).hasClass('icon-zhankai') // $(this).hasClass('icon-zhankai')

9
js/public.js
View File

@ -17,6 +17,15 @@ $(function(){
$(".bottomItem").removeClass("active"); $(".bottomItem").removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
}) })
// 放大banner图
$(".photo_icon").on("click",function(){
if($(this).parents(".slider_panel").hasClass("active")){
$(this).parents(".slider_panel").removeClass("active");
}else{
$(this).parents(".slider_panel").addClass("active");
}
})
}) })
// 取消语音录入 // 取消语音录入

41
map.html
View File

@ -92,27 +92,30 @@
<div class="left_echart" id="mainGraph"></div> <div class="left_echart" id="mainGraph"></div>
<div class="video_img"> <div class="video_img">
<div class="div-video" style="background: #1D346F;"> <div class="div-video" style="background: #1D346F;">
<video width="100%" height="100%" controls> <video src="https://www.w3school.com.cn/i/movie.ogg" width="100%" height="100%" controls="controls">
<source class="video" src="./image/西藏/1.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg" style="width: 400px;">
Your browser does not support the video tag.
</video> </video>
</div> </div>
<div class="slider slider_one_big_picture"> <div class="slider_panel">
<div> <div class="silider_panel_from">
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/1.jpg" /> <span class="photo_icon iconfont icon-kuoda"></span>
</div> <div class="slider slider_one_big_picture">
<div> <div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/2.jpg" /> <img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/1.jpg" />
</div> </div>
<div> <div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/3.jpg" /> <img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/2.jpg" />
</div> </div>
<div> <div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/4.jpg" /> <img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/3.jpg" />
</div> </div>
<div> <div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" /> <img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/4.jpg" />
</div>
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/5.jpg" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>