Final project: Realize the scenic spot video module in the travel network
Languages and frameworks used:
Local introduction of HTML+JS+CSS
Vue.js+Element Local introduction of
Alibaba vector icon library
In order to simplify the repetitive code here, we use vue's v-for to help us traverse arrays or objects, use v-bind to realize dynamic binding of data, and use v-on to realize event monitoring
Module requirements:
1. Click on the picture or icon element or text to pop up a video pop-up window (the onclick event in js)
2. When the picture is suspended, the picture will be enlarged and animated, and the icon of the play button will not be affected by the animation (the parent class in css is relatively Positioning, subclass absolute positioning)
3. After the video is played or the pop-up window is closed, the sound can be turned off to prevent the browser from continuing to play
4. The data is saved in the data of vue, and can be dynamically modified in the console
Show results
Overall code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="fontclass/iconfont.css">
<style>
/* video显示与关闭 */
.videobox {
width: 550px;
height: 340px;
background-color: #fff;
border: 1px solid #ddd;
position: fixed;
top: 50%;
margin-top: -220px;
left: 50%;
margin-left: -280px;
z-index: 999;
display: none;
}
.closex {
position: absolute;
right: 5px;
top: 5px;
z-index: 1000;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
}
/* 播放按钮定位 */
figure .bofang {
left: 120px;
top: 70px;
font-size: 50px;
position: absolute;
cursor: pointer;
}
/* 图片放大效果 */
/*.column figure:first-child {
margin-left: 0;
}*/
/* figure:first-child {
margin-left: 0;
} */
.column {
float: left;
}
figure {
width: 300px;
height: 200px;
margin: 0 20px;
padding: 0;
background: #fff;
overflow: hidden;
position: relative;
}
span {
/* position: absolute; */
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 15px 0 0 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
cursor: pointer;
}
/* 图片悬浮放大 */
.hover02 figure .playv {
width: 300px;
height: auto;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.hover02:hover .playv {
width: 350px;
}
.hover02:hover span {
color: red;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="app">
<h2>景点视频</h2>
<div class="hover02 column" v-for="(iname,index) in imgName">
<!-- @click="imgClick(iname)" -->
<figure>
<img :src="'img/'+iname+'.jpg'" :id="'playv'+iname" class="playv">
<i class="bofang iconfont icon-bofang" style="color: white;" @click="imgClick(iname)"></i>
</figure>
<span @click="imgClick(iname)">{
{spanName[index]}}</span>
<div class="videobox" :id="'videobox'+iname">
<!-- <span class="closex" :id="'closex'+iname"></span> -->
<img :src="imgActive" alt="" class="closex" :id="'closex'+iname">
<video width="500" height="300" style="margin:20px 20px 20px 25px" controls="" :id="'video'+iname">
<source :src="'video/'+iname+'.mp4'" type="video/mp4">
</video>
</div>
</div>
</div>
<script type="text/javascript">
// 父组件
new Vue({
//
el: '#app',
data: {
imgName: ['zjjgjslgy', 'tmsgjslgy'],
spanName: ['张家界森林公园','天门山国家森林公园'],
imgActive: 'img/x.png'
},
methods: {
imgClick(iname) {
this.imgActive = 'img/x.png'
const playv = document.getElementById('playv' + iname)
const videobox = document.getElementById('videobox' + iname);
const closex = document.getElementById('closex' + iname);
videobox.style.display = 'block';
setTimeout(() => {
this.imgActive = 'img/x1.png'
}, 3000)
closex.onclick = function () {
const myVideo = document.getElementById('video' + iname) //对应video标签的ID
myVideo.pause()
videobox.style.display = 'none';
}
}
}
});
</script>
</body>
</html>
Precautions:
1. There can only be one v-for in a tag, and the latter one will fail if there are two. Taking my requirement as an example, I need v-for to traverse the data in two arrays, use the following code
<div class="hover02 column" v-for="iname in imgName" v-for="sname in spanName">
It will report an error
, but if I want to achieve such an effect, I can use the subscript index in v-for to connect the two arrays, provided that the data of the two is synchronized
2. The problem of enlarging the icon with the picture
can be solved by positioning
figure {
width: 300px;
height: 200px;
margin: 0 20px;
padding: 0;
position: relative;
}
figure .bofang {
position: absolute;
left: 120px;
top: 70px;
font-size: 50px;
}
3. The sound is still playing after the video tag is closed
Here I found a similar solution on the Internet, using the watch method of Vue to monitor, but it has no effect, because the placement is wrong
closex.onclick = function () {
const myVideo = document.getElementById('video' + iname) //对应video标签的ID
myVideo.pause()
videobox.style.display = 'none';
}
Here, when we click the cancel button, we should execute the pause function of the video first, and then close it, which can solve this problem.
Of course, some friends did not have this problem at the beginning, but if it is not added in my code framework, this problem will appear
4. For the problem of data transmission,
this problem can only be solved by using the methods method in vue. The best way to pass parameters is to use v-on to listen to events and call methods.
Take me as an example, iname can dynamically bind id, but it cannot be passed into the ByI () method of document, but it can be done by listening to events
5. About the correct use of variable data.
At the beginning, when iname is called internally, an error is always reported, the reason is that the correct format is not written
<img :src="'img/'+iname+'.jpg'" :id="'playv'+iname" class="playv">
Nesting '' inside "", iname itself is also a string, which is different from { {ianme}} written outside.
6. Realize the color change of the cancel button
This has not been fully realized, if you are interested, you can try a wave of ideas.
- When the picture is clicked, a video box pops up, and the cancel button is black at this time (essentially a png picture downloaded from the Alibaba vector icon library) When the mouse hovers over the black cancel button, the button turns red
In response to this requirement, the surface is a color change, and the essence is the floating switch of the picture, and the picture does not have the relevant style, so I don't know how... But, my picture is downloaded from the Alibaba vector icon library. We can import it locally. At this time, the cancel button icon is not a picture, but a font (because it is a vector), which can be realized directly through css style. Since I chose to download it in png, it is very difficult
. This effect has been achieved. I used the settimeout method to automatically switch pictures after the pop-up window is displayed for 3 seconds, haha
Reference link:
https://codepen.io/nxworld/pen/ZYNOBZ
https://www.zjjw.com/culture/list/154?page=1
That's all for today's record, come on!
Next article: Use vue to realize simple front-end paging function