[英]image disappears when I change css clip: rect property
我正在使用clip: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很好,例如:
<img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);">
任何幫助,將不勝感激。
傻了,應該是:
img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)');
由於定義了clip:rect
rect(<top> <right> <bottom> <left>);
其中<top>
和<bottom>
指定距框頂邊框邊緣的偏移,而<right>
和<left>
指定距框左邊框邊緣的偏移。
不過,這還不是解決方案,因為圖片沒有出現在框內,所以也許我應該使用背景位置
編輯:確定更改絕對的左和上位置,將圖像移回到框中:
img.css('left', -x+'px');
img.css('top', -y+'px');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.