當我更改css剪輯時，圖像消失：rect屬性

我正在使用剪輯：rect將圖像剪輯爲縮略圖，並且我想隨機放置剪貼矩形在翻滾過程中。我的代碼：當我更改css剪輯時，圖像消失：rect屬性

$('.itembox').mouseover(function() { 
    var img = $(this).find('img'); 
    var width = img[0].width; 
    var height = img[0].height; 
    var clipwidth = Math.floor($(this).width()); 
    var clipheight = Math.floor($(this).height()); 

    var widthrange = width - clipwidth; 
    var heightrange = height - clipheight; 

    var x = Math.floor(Math.random() * widthrange); 
    var y = Math.floor(Math.random() * heightrange); 
    var x2 = x + clipwidth; 
    var y2 = y + clipheight; 

    img.css('clip', 'rect('+x+'px '+x2+'px '+y+'px '+y2+'px)'); 
    $(this).children('.itemboxbg').show(); 
    $(this).css({'color' : 'white'}); 

});

它正常工作與預設的CSS：

.itemboxbg { 
    border: none; 
    position:absolute; 
    width:193px; 
    height:273px; 
    z-index:0; 
} 
.itemboxbg img { 
    border: none; 
    position: absolute; 
    clip: rect(0px 193px 273px 0px); 
}

但當側翻事件觸發，它改變了圖像消失的CSS。的CSS是罰款e.g：

<img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);">

任何幫助，將不勝感激。

來源

2012-12-18 edzillion

.itemboxbg在哪裏發揮作用？它是一個圍繞img標籤的包裝div嗎？ – Jason

您的JQuery中的$（'。itembox'）'是否可能是'$（'。itemboxbg'）'？ – Jason

nah itembox是保存網格中每個項目的div，jquery運行良好並更新了css，並且chrome開發工具顯示了stlye元素並且看起來不錯，但圖像消失了。 – edzillion

傻，它應該是：

img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)');

因爲剪輯：RECT定義

rect(<top> <right> <bottom> <left>);

其中<top>和<bottom>從盒子的頂部邊框邊緣指定偏移和<right>和<left>從框左邊緣指定偏移量。

不是辦法尚未雖然，由於圖像不箱子內出現，也許我應該用後臺位置，而不是

編輯：OK改變絕對左側&頂部位置移動的圖像放回包裝盒：

img.css('left', -x+'px'); 
img.css('top', -y+'px');

來源

2012-12-19 02:00:21 edzillion

當我更改css剪輯時，圖像消失：rect屬性

回答

相關問題