当前位置： 移动技术网 > IT编程>网页制作>CSS > 设置video适配所有的屏幕大小，滚动事件添加动画的实例讲解

设置video适配所有的屏幕大小，滚动事件添加动画的实例讲解

2019年06月01日  | 移动技术网IT编程  | 我要评论

不夜城手机报价,随身带着百万妖兽,真空环境

一。视频video容器的大小，随着屏幕大小的变化，完美的显示效果。  

1.css

   .videobox{

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  display: none;

  background: rgba(0,0,0,.8);

  z-index: 30;

}

 .videocontrol{

  /*width: 80%;*/

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

   z-index: 10;

}

 .deleteicon{

   position: absolute;

   top: 0;

   right: 0;

   width: 32px;

   height: 32px;

   z-index: 10;

   transition: all 1s;

 }

.deleteicon:hover{

  transform: rotate(360deg);

}

2.html

  <p class="videobox">

    <p class="videocontrol">

      <video class="videocontrol"

     src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/maters/pd_90_v12_911_2.mp4"

             controls="controls"></video>

      <img class="deleteicon" src="./common/images/x3_pro/deleteicon.png" alt="图片">

    </p>

  </p>

3.javascript 

var w = document.documentelement.clientwidth || document.body.clientwidth,

          h = document.documentelement.clientheight || document.body.clientheight,

           $videocontrol = $('.videocontrol');

var videow = (h * 0.9 * 16 / 9).tofixed(2),

        videoh = (w * 0.9 * 9 / 16).tofixed(2);

        if (w - videow > 0 && h-videoh >0) {

            $videocontrol.width(videow);

            $videocontrol.height((videow * 9 / 16).tofixed(2));

        } else if (w - videow > 0 && h - videoh < 0) {

            $videocontrol.width(videow);

            $videocontrol.height((videow * 9 / 16).tofixed(2));

        }else if(w - videow < 0 && h - videoh > 0){

            $videocontrol.height(videoh);

            $videocontrol.width((videoh * 16 / 9).tofixed(2));

        }

二.监听页面滚动事件，实现动画效果。

     $(window).scroll(function () {

            b = $(this).scrolltop();

            $(".ddpai_ctn").each(function () {

                c = $(this).offset().top;

                if (a + b > c + h / 2) {

                    $(this).addclass("move");

                }

                else {

                    $(this).removeclass("move");

                }

            });

        });

        $(".ddpai_shop_13 .playicon").on("click", function () {

            $(".videobox").addclass('db');

        });

        $(".videobox .deleteicon").on("click", function () {

            $(".videobox").removeclass('db');

            playpause();

        });

    }

    function playpause() { //暂停或者播放

        var myvideo = document.getelementsbytagname('video')[0];

        if (myvideo.paused) {

            myvideo.play();

        }

        else {

            myvideo.pause();

        }

    }

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网