在大网格上平滑滚动图像拼贴？
Mik*_*z13 16 javascript css jquery google-maps
很长时间的倾听者,第一次来电这里.
好的,我为这篇文章的篇幅道歉,但我想非常清楚我正在尝试做什么以及我试图希望能指导你的答案.
目标: 我正在尝试创建一个100 x 100的图块网格(图像),我将一次仅显示网格的一部分,因为图像是240 x 120.通过单击按钮(注意:不需要鼠标滚动,缩放等),用户将水平和垂直滚动.
作为一个类比,采取设置的游戏棋盘,你正在低头看它.显示起来非常简单,只需要几个基本图像并将它们放在网格上.现在,考虑一下你只想显示底板的1/3.然后,当用户点击时,他们将视图移动到中间,然后再次单击将他们移到板的前1/3处.这是我想要完成的一个简单示例,除了在更大的网格上具有更小的视图/移动.
我尝试过的:
- 首先,我用PHP编写代码来绘制完整的100x100网格,一切看起来都很棒
- 然后我改变了代码以实际为每个方块写入文件,将它们保存为XY.png
- 我陷入了一个地图工具和缩放类型工具的世界
- 我在编写自己的解决方案时取得了一些成功
地图工具/ Zoomify失败:
在获得完整的地图和图块之后,我试图弄清楚如何只滚动此窗口的一部分.一个灯泡响起:"谷歌地图如何处理事情呢!" 那是在麻烦开始的时候,我被兔子洞吸了一下,研究了所有这些真正让我无处可寻的地图工具,因为很简单,它们似乎只是用于显示地理地图.
然而,我确实在某个时刻被引导到Zoomify,我认为这可能是一个选择.第一个问题是我似乎无法在没有完整图像的情况下拍摄自己的瓷砖,所以我尝试了在阳光下的每个屏幕捕获程序,尝试使用完整网格来完整浏览我的浏览器缩放使他们.我们只是说,这不起作用,但我尝试减小尺寸.它有点工作,但失去了很多质量,我意识到zoomify甚至没有真正实现我所需要的,因为1.滚动不是那么顺利; 2.这些图像最终会包含一些与XY坐标连接的链接,这意味着每次点击向上,向下,向左,向右箭头时我需要控制滚动多少.
我自己并没有失败尝试这样做
好的,然后我回到了基础知识,我把网格扔进了一个溢出的DIV:隐藏在CSS上.太好了,现在我有了一个窗口.我不想一次加载所有这些图像,所以我只在绝对定位的DIV中绘制了具有唯一ID的部分网格(例如Tile_1_1).这看起来很棒,但现在我需要让你看到你在点击箭头按钮时滚动网格,所以我把它扔到了一个javascript函数.我有javascript计算新X和新Y并交换所有图块的图像源,因为它们都是在网格上的X/Y坐标后命名的.实际上,这完全有效,现在地图滚动.问题是,只是改变图像源有点不稳定.毫无疑问,我们正在围绕这个网格移动,因为内容只是瞬间改变.而这个我的朋友是我需要我们帮助的地方.
我哪里做错了？这次最新尝试是否在正确的轨道上？我是否需要完全重新考虑这个问题,或者是否有一些简单的解决方案可以比交换源更优雅地移动磁贴？
请记住,我在php,css等方面表现得相当不错,但我从来没有在javascript上投入太多时间,所以你可能需要在该领域做更多的解释.
PS这是我在这些主板上最接近的东西,但它从来没有真正得到一个明确的答案:使用Ajax平铺HTML图层的滚动/预加载(谷歌地图样式)
更新:使用解决方案
我喜欢Cobby和pseudosavant的答案.Pseudosavant的解决方案非常适合我的盟友,让CSS完成大部分艰苦的工作,但是我选择了Cobby的解决方案.我认为它会给我一点控制权,因为我实际上使用的是菱形网格,我可以更好地将它包裹起来(不是说另一个也不一定有效).
这就是我做的.我知道代码有点粗糙,需要一些清理,但也许它可以帮助别人.
首先,我需要找到我的X和Y轴之间的关系,所以我画了一个小图.
我很快注意到更多的X意味着在更远的左侧和更高的位置开始钻石,以在视图的中心(用户定义的开始)获得正确的坐标,然后通过Y坐标偏移以取消一些负的左下角开始点.
然后,绘制网格的PHP看起来像这样($ xcoord和$ ycoord来自一个表单):
//draw the grid
//Offset leftStart and topStart by Xcoord
$leftStart = 360 - ($xcoord * 120);
$topStart = 360 - ($xcoord * 60);
//Offset leftStart and topStart by Ycoord
$leftStart += ($ycoord * 120);
$topStart -= ($ycoord * 60);
for($y = 1; $y <= 99; $y++) { //y min to y max
$left = $leftStart;
$top = $topStart;
for($x = 1; $x <= 99; $x++) { //x min to x max
//I only want to draw part of the square
if(($x < ($xcoord + 6) && $x > ($xcoord - 6)) && ($y < ($ycoord + 6) && $y > ($ycoord - 6))) {
//Put out the image - this is how i needed mine formated
echo "\t<div class=\"move\" id=\"T" . $x . "_" . $y . "\" style='position:absolute; left:" . $left . "px; top:" . $top . "px;'>\n";
echo "\t\t<img src=\"./<path to your image>" . $x . "-" . $y . ".gif\">\n";
echo "\t</div>\n";
}
$left = $left + 120;
$top = $top + 60;
}
$leftStart = $leftStart - 120;
$topStart = $topStart + 60;
}
用溢出来围绕它扔DIV:隐藏并给它一个ID(我的是#tileView).好的,现在您在视图中绘制了一个菱形网格,现在我们需要开始移动它!
这就是我的jquery看起来的样子.对不起,如果它需要改进,我昨天刚学会了Jquery和Ajax.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#top").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "-=120px", "top": "+=60px"}, 500);
changeImg(x, y, 'up');
$("#ycoord").val(parseInt( y ) - 1);
});
$("#bottom").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "+=120px", "top": "-=60px"}, 500);
changeImg(x, y, 'down');
$("#ycoord").val(parseInt( y ) + 1);
});
$("#left").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "+=120px", "top": "+=60px"}, 500);
changeImg(x, y, 'left');
$("#xcoord").val(parseInt( x ) - 1);
});
$("#right").click(function(){
var y = document.getElementById('ycoord').value;
var x = document.getElementById('xcoord').value;
$(".move").animate({"left": "-=120px", "top": "-=60px"}, 500);
changeImg(x, y, 'right');
$("#xcoord").val(parseInt( x ) + 1);
});
function changeImg(x, y, move){
$.ajax({
type: "POST",
url: "addImage.php",
data: 'x=' + x + '&y=' + y + '&move=' + move,
cache: false,
success: function(html){
$(html).appendTo($("#tileView"));
}
});
$.ajax({
type: "POST",
url: "removeImage.php",
data: 'x=' + x + '&y=' + y + '&move=' + move,
cache: false,
success: function(xml){
$("removeTile",xml).each(function(id) {
removeTile = $("removeTile",xml).get(id);
removeID = $("tileID",removeTile).text();
$("#" + removeID).remove();
});
}
});
}
});
</script>
ajax调用addImage.php在右边的地方添加一个新行,deleteImage.php删除现在不在视图中的行(我发现没有删除那些事情开始运行的行很慢).
在添加图像中,您只需找出要在页面中添加的html的新位置和输出.例如,part可能看起来像这样(但是根据move设置变量然后遍历循环):
if($_REQUEST["move"] == "up") {
$xmin = $x - 5;
$xmax = $x + 5;
$y = $y - 6;
$left = 360;
$top = -360;
for($i = $xmin; $i <= $xmax; $i++) {
$id = "T" . $i . "_" . $y;
$newTiles .= "<div class='move' style='position:absolute; left:" . $left . "px; top:" . $top . "px;' id='$id'><img src='./Map/TileGroup1/1-$i-$y.gif'></div>\n";
$left += 120;
$top += 60;
}
}
然后只需回显$ newTiles就可以使用你的脚本了.
删除是类似的,只是在xml中输入要删除的DIV ID,因为我不能让each()以其他方式工作.
if($_REQUEST["move"] == "up") {
$xmin = $x - 5;
$xmax = $x + 5;
$y = $y + 5;
echo "<?xml version=\"1.0\"?>\n";
echo "<response>\n";
for($i = $xmin; $i <= $xmax; $i++) {
echo "\t<removeTile>\n";
echo "\t\t<tileID>T" . $i . "_" . $y . "</tileID>\n";
echo "\t</removeTile>\n";
}
echo "</response>";
}
希望这有助于某人.谢谢大家的想法和支持!
我认为您需要回到将整个网格嵌套在 DIV 中的方法，但overflow:hidden使用 JavaScript 来确定哪些图像应该可见，并且仅根据需要加载这些图像，然后在用户滚动时加载其他相关图像到那个区域。
当然，滚动应该只操作网格的left和topCSS 属性，以便在包含的 DIV 中移动它overflow: hidden。在您的情况下，最简单的方法是仅以图块大小的增量更改定位 CSS 属性（这样您就不会显示图块的部分）。
从编程的角度来看，这有点麻烦，但听起来您已经有了一种方法来计算哪些内容正在/应该显示？
使用此方法，当第一次加载图像时，它将出现初始故障，但随后移动网格将不必重新加载相同的图像。一旦你完成了这个工作，你可以使用 jQuery 或类似的方法来为left和top属性设置动画，以提供平滑的滚动效果。
然后，如果您愿意，您可以在此基础上进一步构建，并允许部分滚动图块以及像 Google 地图一样单击并拖动滚动。另外，如果您想提高性能，我建议设置一个 nginx 服务器来侦听站点的几个子域以提供图块图像。
编辑：我建议在容器（具有）上设置动画scrollLeft和，这将提供更好的性能/更平滑的滚动。scrollTopdivoverflow: hidden
有一个名为TileMill的简洁程序，虽然 OP 没有使用它，但它可能适用于其他人。