谷歌地图样式滚动的人?

我在寻找一些JavaScript插件(最好jQuery的),以能够滚动的图像,以同样的方式,谷歌地图的工作。

我可以使图像拖动但后来我看到整个图像的同时拖动即使父格是overflow:hidden

任何帮助将不胜感激!

--------------解决方案-------------

我可能有点晚了,但我只是在寻找同样的事情。 我偶然发现是滚动型的jQuery,它的作品完美,正是这一点谷歌地图一样拖动到滚动的溢出的div。

(我超级末到本已经死了聚会,但嘿​​,我发现通过搜索此页等等...)

滚动型插件通过mooware建议并没有为我工作。

然而Dragscrollable做:http://plugins.jquery.com/project/Dragscrollable

试用演示

退房的谷歌地图图像切割机,可以采取任何图像或数码照片,并把它切成这是显示在谷歌地图瓦片。 可能是一个快速的方法来做到你所需要的...

你可以使用谷歌地图API ......它们允许你使用它的自定义图像。 你可以选择,如果控制显示与否。

编辑:找到关于如何做到这一点像样的教程。 http://mapki.com/wiki/Add_Your_Own_Custom_Map

对于底层技术的一个很好的描述看一下第4章(如果我没有记错)Pragmatic Programmers的书务实阿贾克斯。

你会看到在幕后的形象切片和切块是如何工作的。 而放大。

这有少做javascript和更多的做的CSS编码。

尝试一些实验,只是HTML和CSS来获得图像剪辑得当,然后添加JavaScript来移动它。

如果你不能得到它夹与HTML,或移动与JavaScript的发布问题的最简单的示范这里我们调试。

如果没有代码,我们正在拍摄在黑暗中。

谷歌地图使用切成它们是动态加载为​​在不同方向上的用户盘中的块图像。 在谷歌地图图像刀具保罗·狄克逊提到是你想这样做的工具。

如果你只是想平移一个大图像,而不是有多达切片图像分割成块,然后,而不是使用CSS overflow属性的额外的复杂性,你应该使用clip属性。 这是支持所有值得思考,下降到IE4如果我没有记错的浏览器。

有一点要注意:CSS2.1规范显示用逗号分隔的矩形值的例子。 然而,这不是由IE6(或许不IE7,要么)的支持。 但是,所有其他的浏览器不理解逗号的版本。 因此,而不是

clip: rect(5px, 40px, 45px, 5px);

你应该使用

clip: rect(5px 40px 45px 5px);

的兼容性。

你需要一个容器<DIV>设置为位置:相对在<img>元素,然后设置到位置周围:绝对的。

这样的基本技术是用户拖动以更新顶部和左侧的值,其定义的宽度的视图高度使用这些一起在图像上创建相应的矩形()串,并更新顶部,左侧,和夹在<img>元素的样式属性的属性。

不要做我所做的和矩形()字符串值后离开了“PX”。 我花了年龄意识到为什么它不工作:-)

分类:JavaScript的 时间:2012-01-16 人气:0
分享到:

相关文章

  • 如何使用循环在JavaScript中,jQuery的在表中的行数? 2013-12-29

    我有一个表,我想了一些行动,它通过使用JavaScript中循环中执行. 因此,能不能有人告诉我,这将是它的代码. 该循环将为表的所有行工作. 其实我已经从表中删除一个类并在那之后,我有一类适用于特定的行. 什么我的任务就是我必须强调取消高亮选定的行. 当我选择任何行,它的突出,但是当我选择另一排则其依然突出,另一个也. 所以我想从表中的所有行删除选定的类,然后应用选定类特定行. 我的代码是: <style type="text/css"> .highlight { bac

  • 转义的JavaScript中使用jQuery的Rails 2014-01-17

    我在Rails的一个问题逃脱的JavaScript. 使用jQuery,所以escape_javascript()不是一个帮手(我猜?至少它没有工作). 所以,事情是,我在页面上的产品清单. 当你点击一个项目的标题,以项目的详细视图灯箱呈现使用JS响应. 当一些在项目中使用的标题,它在列表中的一切ok. 没有JS运行. 但只要你点击标题,JavaScript是不再逃脱. 出于某种原因,它呈现在show.html.erb没有逃跑. 链接列表(_all_items.html.erb)项弹出: <%=

  • 在Javascript中使用jQuery参数 2012-02-10

    我试图从PHP一个参数传递到我的里面的html javascript函数. 这是在所有可能的? 这是我这么远,但它似乎崩溃,一旦它击中的条件: $str="<input type='submit' value='-' onclick='Call(".$row['field1'].");'/>"; 我希望我不会找一个工作围绕这一点. 谢谢. 编辑:这是我想要调用的函数 function Call(stuff) { alert(stuff); $.get('

  • 在JavaScript中,jQuery的或Django的HTTP基本身份验证? 2013-03-09

    我开发作为"前端"另一个网站(B),这需要一个基本的HTTP验证的Web应用程序(A)(即弹出,并询问用户名和密码的那种). 在我的web应用,每个用户都已经拥有了他对B的用户名和密码存储为自己的账户A.部分然而,用户试图从A B访问资源的第一次,它会提示输入用户名和密码(但不必再为本届会议的其余部分). 我希望它是使用户从来没有明确地进入了国书(因为它们已经存储在他的帐户). 使用Javascript / jQuery的或一些Django的代码,是有可能先发制人验证幕后这个用户,例如

  • 定义函数在Javascript中在jQuery的 2012-01-09

    我工作的一个专有的网站,我有一些问题. 我使用jQuery随着原型,我已经知道了正确的命名空间,所以在这个问题的假设,你可以使用$或JQ作为一个命名空间的引用jQuery的. 所以,我有一堆的功能,有些混合jQuery和JavaScript的,一些普通的JavaScript,只有一些jQuery. 现在,目前某些功能的的document.ready jQuery函数中定义的,有些是它的外部定义,有点像这样: jQ(document.ready(function($) { if ( ifConfi

  • 当在JavaScript中使用“$”/ jQuery的 2014-01-15

    我一直都开始做的JavaScript和jQuery最近一件事我不断地发现自己想知道是什么时候用"$"我知道,指示jQuery的,但它只是并不总是似乎是这样. 我会举一些例子: 这些是我已经写了两个脚本: 第一: $(function() { var newHTML = '<span style="font-size: 1.7em; text-align:center; line-height:50px;">Login</span>'; var

  • JavaScript中,jQuery和HTML标签:如何检查标签关闭 2014-02-24

    我有这个问题很多次:我通过动态jQuery的创建HTML,并在此HTML代码,我想知道是否所有的标签都正确关闭. 如果我尝试看看有什么用Firebug的DOM中,它自动地关闭每个标签,是不是正确地关闭,所以无法在源头看是否所有的标签实际上是正确关闭. 你有一个想法,我怎么可以很容易地找到它是否是动态生成的HTML代码正确关闭? 我用graphist谁始终是修改代码的工作,现在它变得相当复杂(长)排序"手动"的东西. 这是我想检查jQuery脚本示例: $('#tableau >

  • Javascript中,jQuery.extend和“新” 2012-01-03

    我有一个奇怪的行为,同时延长了一个原型使用jQuery.extend的对象. 假设此示例类: var SampleClass = function (anArray) { this.Init(anArray); }; $.extend(SampleClass.prototype, { array: null, collection: new Array(), Init: function (arr) { var c = this; c.array = arr; c.insertInCollect

  • 在Javascript中使用jQuery变量 2012-04-22

    我正在使用AJAX请求调用jQuery选择,所以根据请求返回的值,我选择使用所需的div:EQ()选择,但问题是,我坚持一些东西未定义 这是我希望做 $('.win7red:eq(9)').parent.children('span:eq(1)').children('div:first').css("opacity", "1"); 在这里,在第一EQ选择的值必须为每个请求变量 我在一个javascript变量称为REQ得到的值,然后我用这个,但它会显示错误 $('

  • 有没有办法,直到一个JavaScript封闭完成后暂停脚本? JavaScript中,jQuery的,AJAX 2013-07-06

    如果我使用闭包来定义什么是那里等待这么说,直到变量被移动到下一个位之前填充的方法. 例: var myVari = someFunction(); $.each(myVari, function(){/*code for each*/}); 定义myVari功能是AJAX调用,这可能需要第二个或4(YEA它不是快)来定义变量. 问题是,之前AJAX调用产生的结果.每个$已经发射了和误由于myVari是空的. 有没有更好的方式来处理这种情况? --------------解决方案---------

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 1.093 (s). 10 q(s)