J Query Full Bg

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, и что имя_класс удаляются, когда изображение щелкнуло. Что вы можете сделать, это добавить класс в другом заявлении, поэтому, когда изображение будет нажато снова имя_класс установлен:

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' к фону и т. д.