jquery - 傾斜でDIVの幅をマスクして変更する方法は?

Question

異なるDIVに4枚の写真があります。私が達成したいトリックは、それらを傾斜した長方形の内側にマスクすることです。ユーザーが四角形の 1 つをホバーすると、少し広がり、より多くの画像が表示されます。

静的な例。

SWF を使用せずに、HTML、jQuery、および CSS を使用してこれを実現したいと考えています。通常の長方形について考えると、解決策は非常に簡単ですが、傾斜形状が作用すると、魔法が始まります。

どんなアイデアでも大歓迎です！

Answer 1

HTML 5 キャンバスを使用して、画像のパスを変更することができます。私はあなたを助けるかもしれないjsfiddleを作成しました。

http://jsfiddle.net/ihordeyneka/NKbBD/

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var pattern = null;
var currentSize = 100;
var step = 1;
var direction = 1;

var imageObj = new Image();
imageObj.onload = function() {
pattern = context.createPattern(imageObj, 'repeat');
setInterval(draw, 10);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';

function draw() {
context.clearRect(0, 0, 200, 200);
context.beginPath();
context.moveTo(25,25);
context.lineTo(currentSize,25);
context.lineTo(25,currentSize);

context.closePath();
context.fillStyle = pattern;
context.fill();

currentSize += direction * step;
if(currentSize > 150){
    direction = -1;
}
if(currentSize < 50){
    direction = 1;
}
};