帶邊框的Jquery全屏圖像

我有一些代碼，它給了我一個保持原始比例的全屏圖像（即風景是完全拉伸的寬度方式和縱向高度方式）。我需要能夠在頁面周圍有不同的邊框（即，頂部：100，左側&右側：120，底部：200），圖像將停留在而不會侵入。我有什麼簡單的解決方法嗎？帶邊框的Jquery全屏圖像

任何幫助表示讚賞！

function FullScreenBackground(theItem,imageWidth,imageHeight){ 
    var winWidth=$(window).width(); 
    var winHeight=$(window).height(); 

    var picHeight = imageHeight/imageWidth; 
    var picWidth = imageWidth/imageHeight; 

    if ((winHeight/winWidth) > picHeight) { 
     $(theItem).attr("width",winWidth); 
     $(theItem).attr("height",picHeight*winWidth); 
    } else { 
     $(theItem).attr("height",winHeight); 
     $(theItem).attr("width",picWidth*winHeight); 
    }; 

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2); 
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2); 
}

親愛的主....有人幫助我請！

Swatkins的答案確實給了我的邊界，但圖像沒有按比例縮放。

我使用這個偉大的插件從Malihu： http://manos.malihu.gr/simple-jquery-fullscreen-image-gallery

只是試圖把不同的邊框圍繞圖像正如我上面所說。

任何幫助將是巨大的

來源

2011-09-27 dbach

沒有測試，但你可以嘗試：

function FullScreenBackground(theItem,imageWidth,imageHeight){ 
    var winWidth=$(window).width(); 
    var winHeight=$(window).height(); 

    var picHeight = imageHeight/imageWidth; 
    var picWidth = imageWidth/imageHeight; 

    if ((winHeight/winWidth) > picHeight) { 
     $(theItem).attr("width",winWidth - 240); 
     $(theItem).attr("height",picHeight*winWidth - 300); 
    } else { 
     $(theItem).attr("height",winHeight - 300); 
     $(theItem).attr("width",picWidth*winHeight - 240); 
    }; 

    $(theItem).css("margin-left",(winWidth-$(theItem).width())/2 + 120); 
    $(theItem).css("margin-top",(winHeight-$(theItem).height())/2 + 100); 
}

這應該由邊緣的總數減少的高度和寬度，然後偏移頂部和左側與這些需要的利潤。

來源

2011-09-27 19:10:24 swatkins

感謝您的幫助。這是definatley好一點，但仍不完全正確。如果你想看一下，你可以看到我的編輯鏈接和提供完整的代碼，歡呼聲。 – dbach

通過刪除（+120和+100）的CSS邊距進行工作！乾杯 – dbach

太棒了！對不起，我沒有機會嘗試一下。很高興你找到了修復。 – swatkins

檢查小提琴這裏： http://jsfiddle.net/leifparker/CSS5e/2/

該圖像將調整上點擊。邊界邊界根據附加到img的數據屬性（fullmargins）設置。它遵循像素中的常規邊距縮寫（頂部，右側，底部，左側）。

它目前正在進行動畫製作，但您可以將動畫的延遲時間設置爲0以進行即時調整。

HTML

<img src="http://www.airhorns.co.uk/imgs/85/klaxon_chrome.jpg" data-fullmargins="10 20 10 20" class="background_sizer_image" >

jQuery的

function FullScreenBackground(theItem){ 
    var imageWidth = theItem.width(); 
    var imageHeight = theItem.height(); 

    var theItemMargins = theItem.data('fullmargins').split(' '); 
    var heightMarginDifference = parseInt(theItemMargins[0]) + parseInt(theItemMargins[2]); 
    var widthMarginDifference = parseInt(theItemMargins[1]) + parseInt(theItemMargins[3]); 

    var widthProportion = imageWidth/($(window).width() - widthMarginDifference); 
    var heightProportion = imageHeight/($(window).height() -heightMarginDifference); 

    if (widthProportion > heightProportion){ 
     theItem.animate({ width : (imageWidth/widthProportion) , 
          height : (imageHeight/widthProportion) }, 150) 
    } else { 

     theItem.animate({ width : (imageWidth/heightProportion) , 
          height : (imageHeight/heightProportion) }, 150) 
    } 
} 

$('.background_sizer_image').click(function(){ FullScreenBackground($(this))});

來源

2011-09-27 20:50:24 leifparker

帶邊框的Jquery全屏圖像

回答

相關問題