欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-23 13:16:24
一。视频video容器的大小,随着屏幕大小的变化,完美的显示效果。   1.css    .videobox{   posi...

一。视频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();

        }

    }