当我更改css clip:rect属性时,图像消失了

时间:2012-12-18 23:18:07

标签: javascript jquery css

我正在使用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);">

任何帮助将不胜感激。

1 个答案:

答案 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');