任意变化div的大小

最新推荐文章于 2024-04-19 15:39:51 发布

一只蜗牛儿

最新推荐文章于 2024-04-19 15:39:51 发布

阅读量1.1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_42978535/article/details/122763053

版权

网页任意变动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>

在这里插入图片描述

一只蜗牛儿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
任意变化div的大小

网页任意变动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, ma
复制链接

扫一扫