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

View File

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

View File

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

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

Binary file not shown.

View File

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

View File

@ -17,6 +17,15 @@ $(function(){
$(".bottomItem").removeClass("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");
}
})
})
// 取消语音录入

View File

@ -92,27 +92,30 @@
<div class="left_echart" id="mainGraph"></div>
<div class="video_img">
<div class="div-video" style="background: #1D346F;">
<video width="100%" height="100%" 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 src="https://www.w3school.com.cn/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>
<div class="slider slider_one_big_picture">
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/1.jpg" />
</div>
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/2.jpg" />
</div>
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/3.jpg" />
</div>
<div>
<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 class="slider_panel">
<div class="silider_panel_from">
<span class="photo_icon iconfont icon-kuoda"></span>
<div class="slider slider_one_big_picture">
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/1.jpg" />
</div>
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/2.jpg" />
</div>
<div>
<img class="picture" style="width: 100%;height: 100%;" src="./image/西藏/3.jpg" />
</div>
<div>
<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>