Question

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

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

欢迎任何想法！

Answer 1

可以使用HTML 5画布并更改图像的路径。我创建了可以帮助你的jsfiddle。

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

您可以使用html5 canvas和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/

如何掩盖和修改DIV的倾斜宽度？

2 个答案: