Question

这正是我想要实现的目标：

所以，如果我不清楚，我希望根据浏览器的宽度和高度将这些缩略图倾斜放置。谢谢！

Answer 1

您可以使用百分比值的绝对定位，例如this example。

至于这一行，你可能需要使用画布。

Answer 2

您可能需要使用以下javascript代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
    $('.sample').each(function(){
        var this_index = $(this).index();
        var margin_left = $(this).width() * this_index;
        $(this).css({
            marginLeft : margin_left
        });
    });
});
</script>
<style type="text/css">
a.sample {
    height:100px;
    width:100px;
    display:block;
    background-color:red;

     border-radius:50px;
    -moz-border-radius:50px;
     border:2px solid black;
}
</style>
</head>

<body>
<a href="#" class="sample"></a>
<a href="#" class="sample"></a>
<a href="#" class="sample"></a>
</body>
</html>

Answer 3

这不是那么容易，但有些想法可以实现这一点：

创建一个普通的div并使用CSS倾斜。 Some informations how you can do this.
渲染新图像。例如，使用PHP和gd lib。 About PHP and GD.
使用JavaScript或其他东西动态计算位置。

如何在浏览器窗口的相对角之间的对角线上放置多个图像？

3 个答案: