Question

我的计划是拥有大div（4000px x 4000px）和内部较小的div，其中短语随机定位到那个大div。用户当然只能看到它的一部分。但是当移动鼠标例如在浏览器窗口的右侧时，视图将在该大div上缓慢向右平移。当然，当移动鼠标浏览器窗口的下部时，它会向下平移并且右上角然后它将平移该div的右上角。

在移动设备上（小于600px），所有这些较小的div应该只是堆叠在一起，使用可以只是传统上滚动/下降。

现在我的问题应该是用帆布完成的，还是可以用HTML＆amp;以某种方式jquery？或者有人知道是否有一些jquery lib具有这样的功能？

Answer 1

你可以做的是在画布中解决这个问题，你只显示一个较小的区域，但在你的代码中，对象基本上可以出现在任何地方，或者如果你愿意，可以将它保持在4000x4000的边界内。

您将使用两个变量：offSetX和offSetY，当鼠标朝向画布边缘（左，右，上或下）时，它会发生变化。当您绘制东西时，您将使用分配给它们的x和y坐标绘制它们， MINUS 偏移变量。

下面的工作示例。

注意，为了节省一些CPU，请检查您当前要查看的对象是否在当前查看窗口中是否可见，如果没有，则不要画它。

＆＃13;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

c.height = 300;
c.width = 500;

var offSetX = 0;
var offSetY = 0;
var movingLeft = false;
var movingRight = false;
var movingDown = false;
var movingUp = false;   

//Mouse event to see what is going on.
c.addEventListener("mousemove",move);

function move(event) {
    event = event || window.event;
    x = event.pageX - c.offsetLeft,
    y = event.pageY - c.offsetTop;
    //Stop all movement
    movingLeft = false;
    movingRight = false;
    movingDown = false;
    movingUp = false;
    
    //Check to see if the mouse is in any area that would change the offset
    if (x>c.width-50) {
        movingLeft = true;
    }
    if (x<50) {
        movingRight = true;   
    }
    if (y<50) {
        movingUp = true;   
    }
    if (y>c.height-50) {
        movingDown = true;   
    }
}

function updateDraw() {
    //draw arrow indicating current x
    ctx.clearRect(0,0,c.width,c.height);
    ctx.beginPath();
    ctx.moveTo(c.width/2-10,0);
    ctx.lineTo(c.width/2+10,0);
    ctx.lineTo(c.width/2,10);
    ctx.closePath();
    ctx.stroke();
    ctx.textAlign="center";
    var displayX = c.width/2+offSetX;
    ctx.fillText("x: "+displayX,c.width/2,20);

    //draw arrow indicating current y
    ctx.moveTo(0,c.height/2-10);
    ctx.lineTo(0,c.height/2+10);
    ctx.lineTo(10,c.height/2);
    ctx.closePath();
    ctx.stroke();
    ctx.textAlign="left";
    var displayY = c.height/2+offSetY;
    ctx.fillText("y: "+displayY,13,c.height/2+3);
    
    //add a ball and a rectangle just to have a visual of the field of vision actually moving
    ctx.beginPath();
    ctx.arc(c.width/2-offSetX,c.height/2-offSetY,30,0,2*Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.fillRect(c.width/2+100-offSetX,150-offSetY,50,100);
    
    
    //update the offsets depending on mouse position.
    if (movingLeft) {offSetX++;}
    if (movingRight) {offSetX--;}
    if (movingDown) {offSetY++;}
    if (movingUp) {offSetY--;}
    
    
    requestAnimationFrame(updateDraw);
}

//Starting the whole thing
updateDraw();

＆＃13;

canvas {
    border: 1px solid black;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

在巨大的div上平移

1 个答案: