0

私の進捗状況は@http ://codebucket.webatu.com/code/portfoliotest/index.htmlです

JSfiddleのコード：http：//jsfiddle.net/warmlaundry/qJbG4/70/

'f'と'l'の端をページの端まで伸ばしたい。言葉を挟む2枚の画像の高さを広げているところです。

言葉自体をそのままにしておきたいし、拡大する画像が他の要素を置き換えてほしくない。

これを達成する簡単な方法はありますか？正しくポジショニングすることと関係があると思いますが、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>
4

2 に答える 2

1

CSS を使用して背景画像として配置するのはどうですか?

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

デモ: jsfiddle.net/Marcel/SMs9j (フルスクリーン)

于 2011-04-02T07:51:52.090 に答える
1

2 つの拡張ビットを配置し、画像を背景画像として div に配置して、作業を行いました。

ちょうどあなたの画像を使用しました（おそらく、両方のビットを実行する単一の画像で行うことができます。申し訳ありませんが、メイン画像から欠落しているピクセルを修正しませんでした。今のところピクセルを重ねただけなので、カットオフの外観が修正されましたメイン画像の欠落したピクセルはそれを修正します;) -

次に、配置したら、高さと上/下の負の位置を同時にアニメーション化しました

私は JS を実行できないので、デモは jQuery を使用していますが、ポジショニングのロジックが JS で同じことを行うのに役立つことを願っています

また、私は体の高さを制限してスクロールを永遠に停止しました。これは実際には実用的ではないかもしれませんが、2つの画像が常に同じ高さに移動するため、逆の効果もそれらを元に戻しました..それで、おそらく利点はありますか?

ライブの例

于 2011-04-02T08:54:19.120 に答える