Expand Image Vertically Without Disrupting the Flow with Javascript & CSS_问答_开发者

Expand Image Vertically Without Disrupting the Flow with Javascript & CSS

开发者 https://www.devze.com 2023-02-22 01:42 出处：网络

My Progress is @ http://codebucket.webatu.com/code/portfoliotest/index.html Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/

My Progress is @ http://codebucket.webatu.com/code/portfoliotest/index.html

Code on JSfiddle: http://jsfiddle.net/warmlaundry/qJbG4/70/

I want to make the edges of the 'f' and 'l' stretch to the edge of the page. I'm just expanding the height of two images that sandwich the word.

I want the word itself to stay put, and I don't want the expanding images to displace any other elements.

Is there an easy way to achieve this? I imagine it has to do with positioning correctly, but I still don't have a full grasp of the subtleties of CSS positioning.

I apologize if this question is a re开发者_如何学Gopost; I couldn't think of a good way to phrase the question without posting my own example.

edit: here's my code (since the link seems to be bad)

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

I've gone with positioning the two extended bits and also I put the images as a background image to divs which then did the work.

Have just used your images (with positioning it could probably be done with a single image doing both bits, and sorry I didn't correct the missing pixel off the main image, I just overlapped the pixel for now, hence the cutoff look corrected the missing pixel on the main image would fix that ;) -

then, once positioned - I just animated the height and top/bottom negative positions simultaneously

I can't do JS so the demo's with jQuery, but hopefully the logic of the positioning will help you do the same in JS

also in mine I restricted the body height to stop it scrolling on forever, this might not be practical in real terms, but becasue the two images always go to the same height, the reverse effect brought them back together too.. so advantages maybe?

the live example

What about just using CSS and positioning it as a background image?

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

Expand Image Vertically Without Disrupting the Flow with Javascript & CSS

the live example

Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)

精彩评论

关注公众号

热门标签

图文推荐

Expand Image Vertically Without Disrupting the Flow with Javascript & CSS

the live example

Demo: jsfiddle.net/Marcel/SMs9j (fullscreen)

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：