我正在使用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);">
任何帮助将不胜感激。
答案 0 :(得分:0)
img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)');
因为clip:rect已定义
rect(<top> <right> <bottom> <left>);
其中<top>
和<bottom>
指定框顶部边框边缘的偏移量,<right>
和<left>
指定框左边缘的偏移。< / p>
虽然不是解决方案,因为图片没有出现在框内,也许我应该使用背景位置
编辑:确定改变绝对左和右顶部位置将图像移回框中:
img.css('left', -x+'px');
img.css('top', -y+'px');