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

根据您的评论，您走在正确的轨道上。你必须弄清楚他的代码在做什么。他正在使用您可能不熟悉的三元运算符。我将使用他的返回变量行来帮助解释它。

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

这就是说，如果 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 回答
0

好的，这就是我最终要做的。它可能可以使用一些调整来使代码更高效，并且我可能还会使百分比计算值使用一位小数，以使 div 的移动更平滑。

我在使用 Firefox 和 Opera 时遇到了一个问题：在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 回答