Как разместить несколько изображений по диагональной линии между противоположными углами окна браузера? - PullRequest
Новая
       1

Как разместить несколько изображений по диагональной линии между противоположными углами окна браузера?

0 голосов
/ 23 августа 2011

Это именно то, чего я пытаюсь достичь:

Так что, если я не уверен, я хочу, чтобы эти эскизы были расположены под углом в соответствии с браузеромширина и высота.Спасибо!

Ответы [ 3 ]

0 голосов
/ 23 августа 2011

Возможно, вам понадобится код 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>
0 голосов
/ 23 августа 2011

Это не так просто, но некоторые идеи, чтобы понять это:

  1. Создайте нормальный div и сделайте его косым с помощью CSS. Некоторые сведения о том, как вы можете это сделать.
  2. Рендеринг нового изображения. Например с PHP и gd lib. О PHP и GD.
  3. Используйте JavaScript или что-то еще для динамического расчета позиций.
0 голосов
/ 23 августа 2011

Вы можете использовать абсолютное позиционирование с процентными значениями, как в в этом примере .

Что касается строки, вам, вероятно, потребуется использовать для этого холст.

...