简单点击图片弹出video视频弹窗功能

最新推荐文章于 2021-12-02 13:56:47 发布

原创

最新推荐文章于 2021-12-02 13:56:47 发布 · 7.4k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #iconfont #video标签 #css特效

毕设篇：实现旅游网中的景点视频模块

使用语言及框架：

HTML+JS+CSS
Vue.js+Element的本地引入
阿里巴巴矢量图标库本地引入

这里为了简化重复代码，我们使用vue的v-for来帮助我们遍历数组或对象，使用v-bind来实现数据的动态绑定，使用v-on实现事件监听

模块需求：

1.点击图片或图标元素、文字可以弹出video视频弹窗（js中的onclick事件）
2.悬浮图片时，图片进行放大动画效果，并且播放按钮图标不被动画效果影响（css中的父类相对定位，子类绝对定位）
3.视频播放后或关闭弹窗后能够关闭声音，防止浏览器继续播放
4.将数据保存在vue的data里面，并且可以动态在控制台进行修改操作

效果展示

在这里插入图片描述

整体代码：

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