Javascript J查询完整背景

我正在使用JQuery插件制作全屏图像。我正在使用一些css使图像适合屏幕，但当我单击退出全屏，然后单击返回全屏时，它似乎忽略了我设置的css。有些代码是我在接管项目时继承的，因此有些代码我不完全理解

 .fullBg {
                position: absolute;
                top: 0px;
                left: 0px;
                overflow: auto;
                z-index: 1;
                width:100%;
                height:100%;                
            }

这是JQuery代码

( function($) {
    $.fn.fullBG = function(){
        var el = $(this);

        el.addClass( 'fullBg' );

        function resizeImg() {
            var imgwidth = el.width(),
                imgheight = el.height(),
                winwidth = $(window).width(),
                winheight = $(window).height(),
                heightdiff = winwidth / imgwidth * imgheight,
                new_width = ( heightdiff > winheight ) ? winwidth : winheight / imgheight * imgwidth,
                new_height = ( heightdiff > winheight ) ? winwidth / imgwidth * imgheight : winheight;

            el.css( { 'width' : new_width + 'px', 'height' : new_height + 'px', 'visibility' : 'visible' } );
        }

        $(window).resize( function() {
            resizeImg();
        } ).resize();
    };
} )(jQuery)

当我点击全屏时，它会将我送回原始图像，这段代码似乎可以处理这个问题。我注意到有一段删除类“fullbackground”的代码，这是导致我的问题的原因吗

<img id='fullbackground' height="480px" width="640px" alt="" onclick="ExitfullBackgroundImage()" />

<script type="text/javascript">
        var IsFull = false;
        var IsShowed = false;
        var isShowedAbout = false;
        function ShowIcon() {
            if (!IsFull) {
                var p = $("#fullbackground");
                var position = p.position();
                $("#divIcon").css("left", (position.left + 600) + "px");
                $("#divIcon").css("top", (position.top + 440) + "px");
                $("#divIcon").show();
            }
            else {
                $("#divIcon").hide();
            }
        }
        function HideIcon() {
            $("#divIcon").hide();
        }
        function fullBackgroundImage() {
            IsFull = true;
            $("#fullbackground").fullBg();
        }
        function ExitfullBackgroundImage() {
            if (IsFull) {
                $("#fullbackground").width(640);
                $("#fullbackground").height(480);
                $("#fullbackground").removeClass("fullBg");
                IsFull = false;
            }
            else if (!IsFull) {
                IsFull = true;
                $("#fullbackground").fullBg();
            }

var IsFull=false；
var IsShowed=假；
var isShowedAbout=假；
函数ShowIcon（）{
如果（！已满）{
var p=$（“完整背景”）；
变量位置=p.位置（）；
$（“#divIcon”）.css（“左”，“位置.左+600）+“px”）；
$（“#divIcon”）.css（“top”，（position.top+440）+“px”）；
$（“#divIcon”）.show（）；
}
否则{
$（“#divIcon”）.hide（）；
}
}
函数HideIcon（）{
$（“#divIcon”）.hide（）；
}
函数fullBackgroundImage（）{
IsFull=true；
$（“#fullbackground”）.fullBg（）；
}
函数ExitfullBackgroundImage（）{
如果（已满）{
$（“#全背景”）。宽度（640）；
$（“#全背景”）。高度（480）；
$（“#fullbackground”）.removeClass（“fullBg”）；
IsFull=false；
}
如果（！已满），则为else{
IsFull=true；
$（“#fullbackground”）.fullBg（）；
}

CSS中的样式将附加到类

fullBg

，单击图像时该类名将被删除。您可以做的是在else语句中添加该类，以便再次单击图像时设置类名：

function ExitfullBackgroundImage() {
    if (IsFull) {
        $("#fullbackground").width(640);
        $("#fullbackground").height(480);
        $("#fullbackground").removeClass("fullBg");
        IsFull = false;
    }
    else if (!IsFull) {
        IsFull = true;
        $("#fullbackground").attr("style","");  // <-- clear the inline styles set by javascript
        $("#fullbackground").addClass("fullBg"); // <-- add class
        $("#fullbackground").fullBg();
    }
}

Javascript:

function ExitfullBackgroundImage() {
    $("#fullbackground").toggleClass("fullBg"); 
    // toggleclass 'toggles' the classname on/off

    if($("#fullbackground").hasClass("fullBg")){ 
        $("#fullbackground").fullBg();
    } else {
        $("#fullbackground").attr("style","");
    }
}

---

当我猜到（我还不能运行它）您可能有大小写不敏感的问题。该方法拼写为“fullBG（）”，但您正在调用“.fullBG（）；”。由于Javascript区分大小写，您可能需要调用“.fullBG（）；”使用大写字母G。该方法将类“fullBg”添加到背景中，等等。

你能创建一个小提琴吗。我想这就是问题所在，谢谢，我会给出一个答案go@Ronan我已经更新了我的答案，但请注意，当您删除类名时，fullBg仍然处于活动状态，因此当您调整窗口大小时，它仍将调整图像大小。您还可以需要删除此事件处理程序。如果插件提供了

禁用

或

关闭

功能，那就太好了。这行代码$（“#fullbackground”）.attr（“style”），已经完成了这个技巧，非常感谢。谢谢我尝试了，但当我单击out，然后单击back进入全屏时，它仍然在删除CSS类

function ExitfullBackgroundImage() {
    $("#fullbackground").toggleClass("fullBg"); 
    // toggleclass 'toggles' the classname on/off

    if($("#fullbackground").hasClass("fullBg")){ 
        $("#fullbackground").fullBg();
    } else {
        $("#fullbackground").attr("style","");
    }
}