Question

借助您精彩的JavaScript向导，我有一个原生的JavaScript函数，可以在单击按钮时增加HTML5视频的大小，然后在调整窗口大小时重新运行。

我想删除方程式中的按钮，而不是在页面加载时启动它，删除类名依赖项（如果它们仍然在删除按钮后），同时保持窗口调整大小的触发器。

感谢您的帮助！没有你就无法做到。可以在http://kzmnt.com/test/

看到演示

JavaScript的：

var clicked =  document.getElementById("buttonImportant")

  var videoContainer = document.getElementById('video_container');
  var video = videoContainer.getElementsByTagName('video')[0];

  video.style.height="auto";
  video.style.width="1280px";

  clicked.addEventListener('click',function(){
    if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
        videoContainer.className="video-js-box";
        video.style.height = "";
        video.style.width="";
    }
    else
    {
        videoContainer.className="video-js-box fullScreen";
        video.style.height = "";
        video.style.width="";
    }
    myResizerObject.prevWidth = video.offsetWidth;
    myResizerObject.prevHeight = video.offsetHeight;



    myResizerObject.Init();
  },false);

    var RESIZER = function(){ 

        this.prevWidth = video.offsetWidth;
        this.prevHeight = video.offsetHeight;

        this.videoContainer = document.getElementById('video_container');
        this.video = videoContainer.getElementsByTagName('video')[0];
        this.videoStyle = this.video.style;

        var ratio = this.video.offsetHeight/this.video.offsetWidth;

        var that = this;

        this.Init = function(){
            if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
            {
                var videoContOffsetWidth = that.videoContainer.offsetWidth;
                var videoOffsetWidth = that.video.offsetWidth;
                var videoContOffsetHeight = that.videoContainer.offsetHeight;
                var videoOffsetHeight = that.video.offsetHeight;

                if(that.prevWidth!= videoContOffsetWidth)
                {
                    that.prevWidth = videoContOffsetWidth;
                    var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
                    if(desired>ratio){
                        that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                    }
                    else{ 
                     that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
                    }
                }

                if(that.prevHeight!=videoContOffsetHeight)
                { 
                    that.prevHeight = videoContOffsetHeight;
                    var desired = videoContOffsetHeight/videoContOffsetWidth;  
                    if(desired>ratio){  console.log(ratio);
                        that.videoStyle.top = '0px';
                        that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
                        that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
                    }
                    else
                    {
                        that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';

                    }
                }

            }
        };
    };

    var myResizerObject = new RESIZER();
    window.onresize = myResizerObject.Init;

Answer 1

你在寻找类似......的东西吗？

window.onload = mySuperCoolFunction;

为什么你需要jQuery？也许您可以在底部以粗体显示您的目标/问题，以便我们可以帮助您：）

如果您只想初始化另一个函数，为什么不在调用其他预先编写的jQuery函数时将调用添加到您的superCoolFunction。例如：

$(document).ready(function() {
    center();
    mySuperCoolFunction();    // not necessary to init in another file...
});
$(window).load(function(){
    center();
    mySuperCoolFunction(); 
});
$(window).resize(function(){
    center();
    mySuperCoolFunction(); 
});

在jQuery中重写：

$(function() {
$('video').eq(0).css({
    height: "auto",
    width: "1280px"
});

if ($('#video_container').hasClass('fullScreen')) {
    $('#video_container').attr('class', 'video-js-box');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    });
}
else {

    $('#video_container').attr('class', 'video-js-box fullscreen');
    $('video').eq(0).css({
        height: "auto",
        width: "1280px"
    }); 
}

myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
});

在页面加载时运行本机JavaScript函数

1 个答案: