首页 > 其他分享> > 任意变化div的大小

任意变化div的大小

2022-02-01 10:58:48 作者：互联网

网页任意变动div的大小，我这里只设置了大中小三种大小，可以根据需要自己设置任何大小的div，实现无级变动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div style="text-align: center;">
    <button onclick="playPause()">播放/暂停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <br/>

    <video id="video1" controls preload="none" width="420%" height="100%"  data-setup="{}" autoplay="autoplay">
        <source src="images/test.mp4">
    </video>
</div>
<script>
    var myvideo=document.getElementById("video1")
    function playPause() {
        if (myvideo.paused == true) {
            myvideo.play();
        } else {
            myvideo.pause();
        }
    }

    function makeBig() {
   myvideo.width=560;
    }
    function makeSmall() {
myvideo.width=320;
    }
    function makeNomal() {
myvideo.width=420;
    }
</script>
</body>
</html>

在这里插入图片描述

标签：function,myvideo,width,大小,div,任意
来源： https://blog.csdn.net/qq_42978535/article/details/122763053