前端学习的第九周

最新推荐文章于 2024-10-08 17:48:41 发布

鲲罹

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量66

点赞数 3

文章标签：前端学习

本文链接：https://blog.csdn.net/2202_75675550/article/details/130318727

版权

终于到了和后端写项目的“高端局”，在学姐对我们负责的项目的讲解过程中，我也对项目的模板有了基本的了解，原来前端不止要负责用户所使用的开发页面，还要负责管理员和上层人员所使用的管理页面。这也使我对页面有了新的认识和了解，在简单对自己负责的页面了解后就开始学习关于布局和页面自适应的方法，努力使自己的页面能最大程度的便利用户的使用。

在此写一下关于视频的制作

<!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>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }

.uname{
        position: relative;
        width: 450px;
        height: 300px; 
    }
    /* .uname::before{
        content: ' ';
        background: url(../练习/img/OPC2.jpg);
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        z-index: 1;
        position: absolute;
    } */
/*
原来想在视频前添加一个图片，但发现直接在HTML中使用绝对定位更加简单*/
    /* 记住这个属性，非常的好用 */
 .uname video{
        object-fit: cover;
/*使用该属性可以使视频铺满整个盒子*/
    .uname img{
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index:1;
    }
   
    }
    .cricle{
        display: block;
        margin: 100px 175px;
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: rgba(249, 0, 66, 0.5);
        border-radius: 50%;
        z-index: 2;
    }
    .show{
        cursor: pointer;
        display: block;
        width: 0;
        height: 0;
        margin: 30px 50px;
        border:20px white solid ;
        transform: scaleX(1.5);
        border-color: transparent transparent transparent #fff;
    }
</style>
<body>
    <div class="uname">
        <img src="../img/OPC2.jpg" alt="例图">
        <div class="cricle">
            <div class="show">
            </div>
        </div>
</div>
</body>
<script>
//获取元素
    const uname = document.querySelector('.uname');
    const img = document.querySelector('.uname img');
    const cricle = document.querySelector('.uname .cricle');
    const show = document.querySelector('.uname .show');
    // console.log('点击播放');
//为播放按钮添加点击事件
    show.addEventListener('click',function(){
//在点击时原图片隐藏
        img.style.display = 'none';
        cricle.style.display = 'none';
        show.style.display = 'none';
//添加视频
//并为其添加自动播放
        uname.innerHTML += `<video width = 100% height = 100% autoplay controls>
        <source src="../img/视频.mp4" type="video/mp4">
    </video>`
    })

</script>
</html>

注意在写视频制作时应该在点击事件发生后再添加视频，如果在HTML中直接添加视频的话会导致在未点击播放按钮时视频就已经开始播放。

在接下来的一个月中我也要努力学习项目的书写标准，努力加强与后端合作的配合程度，努力使我们的项目得到用户的肯定和广泛使用。加油吧！不做小趴菜。

下一站，彩虹海！