使用 Javascript 和 JavaScript 在不中断流程的情况下垂直扩展图像CSS

发布于 2024-10-29 11:35:34 字数 2128 浏览 4 评论 0原文

我的进度是@ http://codebucket.webatu.com/code/portfoliotest /index.html
JSfiddle 上的代码：http://jsfiddle.net/warmlaundry/qJbG4/70/

我想让“f”和“l”的边缘拉伸到页面的边缘。我只是扩大了夹着这个词的两个图像的高度。

我希望这个词本身保持不变，并且我不希望扩展的图像取代任何其他元素。

有没有一种简单的方法可以实现这一目标？我想这与正确定位有关，但我仍然没有完全掌握 CSS 定位的微妙之处。

如果这个问题是重新发布的，我深表歉意；如果不发布我自己的例子，我想不出一个好方法来表达这个问题。

编辑：这是我的代码（因为链接似乎不好）

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嗫嚅 2024-11-05 11:35:34

我已经定位了两个扩展位，并且将图像作为背景图像放置到 div 中，然后由 div 完成工作。

刚刚使用了您的图像（通过定位，它可能可以通过执行这两个位的单个图像来完成，抱歉，我没有纠正主图像中丢失的像素，我现在只是重叠了像素，因此截止看起来纠正了主图像上缺少像素可以解决这个问题；）-

然后，一旦定位-我只是同时对高度和顶部/底部负位置进行动画处理，

我无法执行 JS，因此该演示使用 jQuery，但希望定位的逻辑会有所帮助你在JS中也做了同样的事情

，我限制了主体高度以阻止它永远滚动，这实际上可能不实用，但因为两个图像总是达到相同的高度，相反的效果也使它们回到一起..也许有优势？

实例

回复收藏 0 原文

墨落成白 2024-11-05 11:35:34

只使用 CSS 并将其定位为背景图像怎么样？

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

演示：jsfiddle.net/Marcel/SMs9j (全屏)

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

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

回复收藏 0 原文

~没有更多了~

关于作者

过期情话

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

使用 Javascript 和 JavaScript 在不中断流程的情况下垂直扩展图像CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

实例

the live example

演示：jsfiddle.net/Marcel/SMs9j (全屏)

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

关于作者

相关话题

热门标签

推荐作者

我早已燃尽

就像说晚安

donghfcn

脱单之前绝不改名′

凡尘雨

鲜血染红嫁衣

友情链接

使用 Javascript 和 JavaScript 在不中断流程的情况下垂直扩展图像CSS

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

演示：jsfiddle.net/Marcel/SMs9j (全屏)

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

关于作者

相关话题

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。