Расширяйте изображение по вертикали, не прерывая процесс с помощью JavaScript и CSS - PullRequest
Новая
       14

Расширяйте изображение по вертикали, не прерывая процесс с помощью JavaScript и CSS

0 голосов
/ 02 апреля 2011

Мой прогресс - @ http://codebucket.webatu.com/code/portfoliotest/index.html

Код на JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/

Я хочу, чтобы края 'f' и 'l' растягивались до края страницы. Я просто увеличиваю высоту двух изображений, которые соединяют слово.

Я хочу, чтобы само слово оставалось на месте, и я не хочу, чтобы расширяющиеся изображения вытесняли любые другие элементы.

Есть ли простой способ добиться этого? Я полагаю, что это связано с правильным позиционированием, но я все еще не совсем понимаю тонкости позиционирования CSS.

Я прошу прощения, если этот вопрос является репостом; Я не мог придумать хороший способ сформулировать вопрос, не опубликовав свой собственный пример.

edit: вот мой код (поскольку ссылка кажется плохой) 

<html>
<head>
<style type="text/css">

#portfolioBottom{position:relative;top:-1px;}
#portfoliotop{position:relative;top:1px;}

</style>
<script type="text/javascript">

var heightBottom;
var heightTop;
var interval;

function addHeight(){
    document.getElementById("portfolioBottom").style.width="249px";
    heightBottom = parseInt(document.getElementById("portfolioBottom").style.height);
    heightBottom=heightBottom + 5;
    document.getElementById("portfolioBottom").style.height=heightBottom;

    document.getElementById("portfolioTop").style.width="210px";
    heightTop = parseInt(document.getElementById("portfolioTop").style.height);
    heightTop=heightTop + 5;
    document.getElementById("portfolioTop").style.height=heightTop; 
}

</script>
</head>
<body>
<button onclick="interval=self.setInterval('addHeight()',1);">Start</button><button onclick="interval=window.clearInterval(interval)">Stop</button><br /><br />

<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio top.png" id="portfolioTop" style="height:6px;" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio.jpg" id="portfolio" /><br />
<img src="http://codebucket.webatu.com/code/portfoliotest/portfolio bottom.png" id="portfolioBottom" style="height:6px;" />

</body>
</html>

Ответы [ 2 ]

1 голос
/ 02 апреля 2011

Я установил два расширенных бита, а также поместил изображения в качестве фонового изображения в элементы div, которые затем сделали свою работу.

Только что использовали ваши изображения (с позиционированием это могло бы быть сделано с одним изображением, выполняющим оба бита, и извините, я не исправил отсутствующий пиксель из основного изображения, я просто перекрыл пиксель на данный момент, отсюда отсечение внешний вид исправил отсутствующий пиксель на основном изображении, это исправило бы;) -

затем, после позиционирования - я только что анимировал отрицательные позиции по высоте и сверху / снизу одновременно

Я не могу сделать JS, поэтому демоверсия с jQuery, но, надеюсь, логика позиционирования поможет вам сделать то же самое в JS

также в моем я ограничил высоту тела, чтобы остановить его прокрутку навсегда, это не может быть практичным в реальном выражении, но из-за того, что два изображения всегда имеют одинаковую высоту, обратный эффект также свел их вместе ... так преимущества может быть?

живой пример

1 голос
/ 02 апреля 2011

Как насчет использования CSS и позиционирования его в качестве фонового изображения? 

html {
    margin:0;
    padding:0;
    height:100%;
    background:#fff url("//imgur.com/qJMrs.png") 2em 50% fixed no-repeat;
}

Демонстрация: jsfiddle.net / Marcel / SMs9j ( во весь экран )

...