1

解決しようとしている問題の簡略版を作成しました。ご覧ください

HTML:

<div class="container">
<div class="bg-left">
<div class="content">
        Some content here
</div>
</div>
</div>

CSS:

.container {
   display: block;
   height: 200px;
   width: 100%;
   background-color: #e2e2e2;
}

.bg-left {
   background-image: url('http://i.imgur.com/hDheuGJ.png');
   background-repeat:no-repeat;
   background-position: 0px 0px;
   width: 100%;
   height: 100%;
}

.content {
   width: 960px;
   margin: 0 auto;
   font-size: 20px;
}

JSFiddle: http://jsfiddle.net/gnPC6/

このコードには以下が含まれます。

1) 左上に配置された背景画像を含む 100% 幅の DIV (つまり、黒い三角形)

2) この div 内には、幅が 960px で中央に配置された別の div があります。一部のコンテンツはここに配置されます。

問題:ブラウザー ウィンドウの幅を変更しても、黒い三角形が左上に表示されたままになり、その結果、この画像が前景のコンテンツを覆い隠してしまいます。

したがって、私が達成しようとしているのは次のとおりです。

1) ユーザーのブラウザのサイズが 1050px 以下に変更された場合、黒い三角形の Background-POSITION は、ブラウザのサイズが変更されるほど黒い三角形が見えにくくなるように調整されます (つまり、背景画像が画面から動的にスライドします)。左の方です）...

ユーザー ウィンドウが 1051px 以上の場合、背景の位置は 0px 0px のままにする必要があります。

ユーザーのウィンドウが 1050px の場合、background-position は 0px -1px にする必要があります。

ユーザーのウィンドウが 1049px の場合、background-position は 0px -2px にする必要があります。

ユーザーのウィンドウが 1048px の場合、background-position は 0px -3px にする必要があります。等

これは本質的に私が達成しようとしていることですが、これを解決するためにJavascriptをどこから始めるべきかわかりません。

何か提案があれば教えてください。どうもありがとうございました。

EDITメディア クエリは知っていますが、この問題を効果的に解決できるとは思いません。ブラウザーの幅に基づいて CSS を変更するだけではなく、ブラウザーのサイズが変更されると、背景の位置が動的に変化するようにします。これには、何百もの @media 宣言ではなく、javascript ソリューションが必要であると確信しています。

4

3 に答える 3

1

次のようなことができます (jquery を使用): http://jsfiddle.net/spacebean/gnPC6/18/

明らかに、ブラウザを正しいサイズで表示するには、ブラウザを拡大する必要があります。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function debouncer(func) 
{   
    var timeoutID, timeout = 100;
    return function () 
    {
        var scope = this, args = arguments;
        clearTimeout(timeoutID);
        timeoutID = setTimeout(function () 
        {
            func.apply(scope, Array.prototype.slice.call(args));
        }, timeout);
    };
}

$(window).resize(debouncer(function () 
{
    bgResize($(document));

}));

     function bgResize(){

    var thisWidth = $(document).width(),
        offSet = thisWidth - 1051;

    if(offSet < 0) {
        $('.bg-left').css({'background-position': offSet+'px 0px'});   
    }     
}    

$( document ).ready(bgResize);

</script>

タイムアウト/デバウンサーは、ブラウザーが移動するすべてのピクセルでスクリプトが起動するのを防ぎ、代わりに起動する前に 10 分の 1 秒に制限します。一度に何百もの関数呼び出しを作成することを気にしない場合は、次のようにすることができます。

   $(window).resize(bgResize);

     function bgResize(){

    var thisWidth = $(document).width(),
        offSet = thisWidth - 1051;

    if(offSet < 0) {
        $('.bg-left').css({'background-position': offSet+'px 0px'});   
    }     
}    

$( document ).ready(bgResize);
于 2013-10-18T16:02:45.723 に答える
0

最も簡単な方法は、主にウィンドウ サイズに基づいてフォントのサイズを変更するために使用する少量の jQuery を使用することです。毎回完璧に機能します...

  1. ウィンドウの幅を確認する
  2. 幅の変数を作成します
  3. 全体の幅の一部に基づいて css を変更する

私のフィドルからコードを簡単に変更して、背景位置の css を変更できます。必要な数の css 行を追加して、他の css 要素も変更することもできます。

   $(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
$('#num').css( "font-size", windowSize / 4 );

フィドルなど...

http://jsfiddle.net/insitemobile/xhP8k

于 2013-10-23T12:56:06.137 に答える