0

このスクリプトは、stackoverflow に関する別の質問から取得しましたが、完全に機能します。スクリプトは要素を px 単位で更新します。たとえば、上向き矢印キーと左向き矢印キーを押したままにして、要素を斜めに移動できる方法が特に気に入っています。

私の質問は次のとおりです。代わりに要素の値をパーセントで設定および更新するようにスクリプトを変更することは可能ですか?

この理由は、私はレスポンシブ デザインのサイトを開発しており、ウィンドウ サイズに対して要素をページ上にとどめる (そして移動する) 必要があるためです。私はそれを理解しようとしましたが、これまでのところ成功していません。

スクリプトは次のとおりです。

HTML

<div id="pane">
    <div id="box"></div>
</div>

CSS

#pane {
    position:relative;
    width:300px; height:300px;
    border:2px solid red;
}

#box {
    position:absolute; top:140px; left:140px;
    width:20px; height:20px;          
    background-color:black;
}

JavaScript

var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); }, //Function should set values in %
        top: function(i,v) { return newv(v, 38, 40); }   //here for left and top
    });
}, 20);

コーヒースクリプト

jQuery ->       
    pane = $('body')
    box = $('.myDiv')
    w = pane.width() - box.width()
    c = [37,38,39,40] # Set key values for arrow keys in an array
    d = []
    x = 4

    newv = (v,a,b) ->
        n = parseInt(v, 10) - (if d[a] then x else 0) + (if d[b] then x else 0)
        if n < 0 then 0 else if n > w then w else n

    $(window).keydown((e) ->
        d[e.which] = true
    )

    $(window).keyup((e) -> 
        d[e.which] = false
        if true not in d and e.which in c #Check that all arrow keys are released

        divID = $('.myDiv').attr('id')  # Grab values from the element
        top = $('.myDiv').css('top')
        left = $('.myDiv').css('left')

        setTimeout ->  #Set a timeout and then send element values with Ajax to database to preserve state of element for next time window is opened
            $.ajax(
                type: "PUT"
                url: "/url/to/update/database"
                data:
                    positiontop: top
                    positionleft: left
            )
            ,1000
         )

    setInterval ->
        box.css
            left: (i,v) ->
                newv(v, 37, 39)
            top: (i,v) -> 
                newv(v, 38, 40)
    ,40
4

2 に答える 2

0

わかりました、これが私がやったことです。おそらく、コードをより効率的にするために微調整を使用できます。また、div の移動をよりスムーズにするために、パーセント計算値に 1 つの小数を使用するようにすることも考えられます。

Firefox と Opera で 1 つの問題に遭遇しました。setInterval 関数では、v値がピクセル単位で返されます。そこで、v = box[0].style.leftとv = box[0].style.topを追加して、すべてのブラウザーでパーセントとして返される値を取得しました。

ブラウザー ウィンドウは必ずしも正方形ではないため、幅と高さを別々に計算する別の関数も追加しました。

JavaScript 

var pane = $(window),
    box = $('#box'),
    w = (pane.width() - box.width())/pane.width()*100,
    h = (pane.height() - box.height())/pane.height()*100,
    d = {},
    x = 1;

//Caclulate height movement and window height bounds in %
function newvHeight(v,a,b) {
    v = box[0].style.top  //Grab :top value of the #box div as % in all browsers
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return (n < 0 ? 0 : n > h ? h : n) + '%';
}

//Calculate width movement and window width bounds in %
function newvWidth(v,a,b) {
    v = box[0].style.left   //Grab :left value of the #box div as % in all browsers
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return (n < 0 ? 0 : n > w ? w : n) + '%';
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newvWidth(v, 37, 39); },   //Function should set values in %
        top: function(i,v) { return newvHeight(v, 38, 40); }    //here for left and top
    });
}, 20);
于 2012-05-29T08:18:06.783 に答える
0

あなたのコメントによると、あなたは正しい軌道に乗っています。彼のコードが何をしているのかを理解する必要があります。彼は、あなたがよく知らないかもしれない三項演算子を使用しています。彼の return 変数行を使用して説明します。

return n < 0 ? 0 : n > w ? w : n;

これは、ゼロ未満またはボックス幅より大きい場合は n を返すことを意味します。それ以外の場合は、境界にいるため、そのままにしておきます。あなたの場合、それを返したいと思うでしょうn > 0 or < 100。次に、px ではなく % で返すように変更するだけです。これを行うには、「%」を追加します。

http://jsfiddle.net/bDMnX/332/

w = 100; //pane.width() - box.width(),

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    //console.log((n < 0 ? 0 : n > w ? w : n) + '%');   
    return (n < 0 ? 0 : n > w ? w : n) + '%';
}

バウンディングとインクリメントの取得はあなたにお任せします。

于 2012-05-28T04:07:32.527 に答える