Question

我正在使用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();
            }

Answer 1

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();
    }
}

但是，我会考虑通过更多地使用css来改进这段代码：

CSS：

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

使用Javascript：

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

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

Answer 2

当我猜测时（我还没能运行它）你可能会遇到不区分大小写的问题。该方法拼写为“fullBG（）”，但您正在调用“.fullBg（）;”在那。由于Javascript区分大小写，因此您可能需要调用“.fullBG（）;”使用大写G.该方法将类'fullBg'添加到背景等。

JQuery Full Bg

2 个答案: