Question

我从另一个问题< a href=' https://stackoverflow.com/ questions/4950575/how-to-move-a-div-with-arrow-keys> 上找到这个脚本,这个脚本非常完美。脚本更新了 px 中的元素, 我特别喜欢您通过举起“ 左箭头” 键来移动元素对角的方式。

现在我的问题是:能否修改脚本, 使脚本设置和更新百分比元素的值?

其原因是我正在开发一个具有响应性设计的网站,我需要将元素留在页面上(并移动)与窗口大小相对。我试图找出原因,但至今还没有成功。

以下是脚本 :

HTML 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

Answer 1

好吧,这就是我最后要做的。它也许可以使用一些节奏来提高代码的效率,我还可能使百分率计算值使用小数点后一位来使 div 移动更加平滑。

我遇到了一个与 Firefox 和 Opera 有关的问题: 在 < 坚固 > 设定中间函数中, < 坚固 > < /坚固 > 值以像素形式返回。因此我添加了 < 坚固 > v = 框[0]. style. left 和 < 坚固 > v = 框[0]. stype. 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);

Answer 2

您的意见是正确的。您必须了解他的代码正在做什么。他正在使用 < a href=" https:// stackoverflow. com/ questions/1788917javascript- ternary- operator" 的永久操作器 , 您可能不熟悉。我将使用他的返回变量行来解释。

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

这里表示, 如果它小于零或大于框宽度, 则返回 n。否则, 因为我们处于边界线, 就不要去掉它。如果您想要它返回 < code> n & gt; 0 或 & lt; 100 。然后您只需要修改它, 以% 而不是 px 来返回。您通过附加% 来这样做。

http://jsfiddle.net/bDMX/332/" rel="没有跟随 nofollown noreferrer" >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) +  % ;
}

我会把绑定和递增权留给你

友情链接