CSS背景圖像動態調整大小

類似的問題我一直在處理一段時間。我有一個鏈接，通過CSS分配給它的背景圖片。我也有一個懸停圖像來處理它。我動態地調整頁面圖像大小，以便它可以調整圖像映射的大小。我正在嘗試添加一個Div，以便有一個打印機圖標，您可以使用鼠標懸停並顯示懸停圖標。當我將所有東西放在原圖上時，它都可以工作，但是一旦我調整了背景和圖像彈出窗口的大小，打印機div的大小就會調整，但div中的背景圖像不會調整大小。CSS背景圖像動態調整大小

http://jsfiddle.net/trout0525/qfd58krc/1/

function mainLoad() { 

    var imageElement = document.getElementById('jDirBackground'); 
    imgScale = currentScale(imageElement); 
    alert("mainLoad imgScale: " + imgScale); 
    var mapElement = document.getElementById('jDirMap'); 
    var imageMap = new imageMapResize(mapElement, imgScale); 
    imageMap.resize(); 
    var printerIcon = new printerIconResize(imgScale); 
    printerIcon.resize(); 

    return; 
}

來源

2014-09-18 trout0525

OK，我終於找到了解決辦法，我認爲是合理的。最主要的是CSS3沒有足夠強大的功能去完成我期望的功能，所以我回到了HTML演化圖上。

http://jsfiddle.net/trout0525/qfd58krc/2/

我曾希望CSS可以處理圖形調整大小，但它似乎並沒有能夠做到這一點。我做投擲的onmouseover和onmouseout的一個老同學位：

onmouseover="imgHover(this)" onmouseout="imgLeave(this)"

和代碼，以滿足它：

function imgHover (x) { 
    x.src = "http://static.wixstatic.com/media/7a35ec_64af7af5864a4f2dad19c8c20855e532.jpg"; 
} 
function imgLeave (x) { 
    x.src = "http://www.mailersstore.com/images/SECAP-SA3150.jpg"; 
}

然後我不得不處理大小調整在這個JavaScript：

function printerIconResize(imgScale) { 
    var position = $('#printerDiv').position(); 
    var divWidth = $('#printerDiv').width(); 
    var divHeight = $('#printerDiv').height(); 

    var iconWidth = $('#printerIcon_link').width(); 
    var iconHeight = $('#printerIcon_link').height(); 

    // Get on screen image 
    var screenImage = $("#printerIcon_link"); 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = screenImage.attr("src"); 

    // Get accurate measurements from that. 
    iconWidth = theImage.width; 
    iconHeight = theImage.height; 

    this.resize = function() { 
     var newTop = position.top * imgScale; 
     var newLeft = position.left * imgScale; 
     var newDivWidth = parseInt((divWidth * imgScale), 10); 
     var newDivHeight = parseInt((divHeight * imgScale), 10); 
     var newIconWidth = parseInt((iconWidth * imgScale), 10); 
     var newIconHeight = parseInt((iconHeight * imgScale), 10); 

     $('#printerDiv').offset({ top: newTop, left: newLeft }); 
     $('#printerDiv').width(newDivWidth); 
     $('#printerDiv').height(newDivHeight); 
     $('#printerIcon_link').width(newIconWidth); 
     $('#printerIcon_link').height(newIconHeight); 

     newPosition = $('#printerDiv').position(); 
     newDivWidth = $('#printerDiv').width(); 
     newDivHeight = $('#printerDiv').height(); 
     newIconWidth = $('#printerIcon_link').width(); 
     newIconHeight = $('#printerIcon_link').height(); 
     return true; 
    }; 

    window.onresize = this.resize; 
}

它需要一段時間的頁面加載和重新加載，但這是我現在可以想出的最好的。如果你知道更好的方法....

順便說一句，JSFiddle代碼似乎不起作用，但如果你離開網站並嘗試它，它應該沒問題，除了imgHover和imgLeave實際上在html文件的腳本區域，而不是js文件。

嗖！時間喝啤酒。（或三個）

來源

2014-09-18 19:04:32 trout0525

CSS背景圖像動態調整大小

回答

相關問題