jquery - 如何在倾斜时屏蔽和修改 DIV 的宽度？

Question

我在不同的 DIV 上有 4 张图片。我想要实现的技巧是将它们隐藏在倾斜的矩形内。当用户悬停其中一个矩形时，它会展开一点以显示更多图片。

静态示例。

我想使用 HTML、jQuery 和 CSS 来实现这一点，而不需要任何 SWF。当您考虑常规矩形时，解决方案非常简单，但是当倾斜形状发挥作用时，魔术就开始了。

欢迎任何想法！

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;
}
};

Answer 2

You can do this with html5 canvas and paper.js.

createSplitPictures(["http://img.over-blog.com/600x450/4/26/15/99/Novembre-2012/image-jaune1.jpg",  "http://www.gratuit-en-ligne.com/telecharger-gratuit-en-ligne/telecharger-image-wallpaper-gratuit/image-wallpaper-animaux/img/images/image-wallpaper-animaux-chatons.jpg" , "http://www.desktopwallpaperhd.net/thumbs/19/5/islands-paradise-maldive-nature-background-image-landscape-194469.jpg" , "http://img.over-blog.com/600x450/4/26/15/99/Novembre-2012/image-jaune1.jpg"]);

http://jsfiddle.net/HDmCN/1/