草庐IT

滚动动画

全部标签

Safari 的 JavaScript 动画

我正在尝试创建使用JavaScript的网络应用程序。我希望能够在这些应用程序中使用动画。我曾尝试使用基本的JavaScript,但我认为最好的办法是使用库(例如YUI或jQuery)。我遇到了一个问题。在Safari上,当我运行动画脚本时,动画非常粗壮、非常block状。YUI和基本的JavaScript都会发生这种情况。为什么会这样?是否有任何好的库不会在Safari中产生此问题,但也适用于InternetExplorer和Firefox(希望还有Opera)? 最佳答案 我找到了MooTools对于动画来说非常流畅,只是比jQ

javascript - JqTouch - 检测动画触发器

我在使用jqTouch时遇到了另一个问题......我正在尝试检测单击了哪个元素以触发动画,以便我可以将参数从单击的项目传递到后续页面。我的HTML是:PlacesBackPlace1Place2Place3Back当我点击#places中的任何列表项时,我能够很好地滑到#singleplace,但我试图检测哪个元素被点击,以便我可以将参数传递到#singleplace分区我的javascript是:varplaceID;$('#placesa').live('mouseup',function(){$('#singleplaceh1').html($(this).text())pla

javascript - 如何让页面滚动触发鼠标悬停事件?

当鼠标因滚动(通过滚轮或键盘滚动)而开始悬停在某个元素上时,它不会在悬停的元素上触发鼠标悬停事件(OSX上的Chrome6)。滚动时触发正确元素的鼠标悬停事件的优雅方式是什么? 最佳答案 老实说,这会很痛苦。你必须确定应获得鼠标悬停处理程序的每个元素的大小和位置。向窗口添加滚动监听器。在处理程序中,获取鼠标光标位置和pageOffset。找出光标所在的元素。手动调用实际的鼠标悬停处理程序(找出光标离开了哪些元素,如果你也想要一些mouseout行为)如果元素是动态的,您可能需要重新计算元素的位置和大小。(将1.移到3.下方。)虽然这

javascript - 使用 jQuery 设置动画时丢失悬停(不移动鼠标)

我有这一行缩略图,我正在用jQuery制作动画。这些缩略图中的每一个都有悬停和事件类。它们工作正常,但是当我为列表设置动画时,鼠标光标下的新缩略图不应用悬停?每次单击后我都必须稍微移动一下鼠标吗?有点难以解释..我在这里做了一个fiddle:http://jsfiddle.net/nZGYA/当你在拇指3之后开始点击而不移动鼠标时,你明白我的意思了......它在FireFox中运行良好,不适用于Safari、Chrome、IE等。我能做些什么吗?这里是我的代码供引用:.container{position:relative;overflow:hidden;width:140px;he

javascript - 如何按比例设置此 jQuery 动画的持续时间?

我已经创建了一个快速测试来展示我正在尝试做什么:http://jsfiddle.net/zY3HH/如果您单击“切换宽度”按钮一次,一个正方形将需要一秒钟的时间才能增长到全宽。再次点击它,需要一秒钟的时间才能缩小到零宽度。但是,快速连续单击两次“切换宽度”按钮-第二次时正方形已增长到其总宽度的一小部分(如10%)-您会注意到动画仍然需要整整一秒钟将正方形返回到零宽度,这看起来很尴尬,IMO。虽然这种行为是预料之中的,但我希望后面的动画在与其覆盖的宽度成正比的时间内发生。换句话说,如果您在正方形达到其总宽度的10%时再次单击“切换宽度”,我希望它需要大约1/10秒的时间才能收缩回零宽度。

javascript - 分离并重新连接鼠标滚轮事件监听器不重置滚动惯性

我正在使用jquery-mousewheel触发功能的插件。当我调用moveit时,我会分离监听器并等待动画完成,然后重新附加监听器。问题是,当我重新附加它时,鼠标滚轮插件仍在监听某些鼠标/触控板的惯性,并反复调用moveit。我想在我的特定情况下,去抖动或限制函数调用不是好的解决方案,因为惯性仍然存在,而且我还希望为其他可能的moveit调用立即附加监听器。有没有办法通过完全重置鼠标滚轮事件来“消除惰性”,而不是仅仅将其分离?$(document).ready(function(){vartween;varslide=$('#slide');functionbodyListen(){

javascript - 如何限制移动网站的滚动但允许访问可能缩回的地址栏

Ihavearepoupandrunningifyou'reinterestedincontributingtosolutions.我在构建移动网站时遇到了一个有趣的问题。我正在设置“溢出:隐藏;”当抽屉被切换时到html/body。这样窗口就无法滚动,并且抽屉-可滚动-在达到其极限时不会滚动页面(e.preventDefault();&e.stopPropagation();千万别耍花招)。这一切都很好。如果这是一个Phonegap应用程序,那就太棒了。但是,由于这是一个网站,不一致的溢出设置会导致浏览器的“全屏模式”出现可用性问题。“全屏模式”是指在向下滚动页面时隐藏地址栏。当向上

javascript - OpenLayers3 中的特征动画

我很好奇在OpenLayers3中动画功能的可能性。我非常了解此处提供的示例http://openlayers.org/en/v3.0.0/examples/animation.html和这里https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms但是OL3的官方例子不太符合我的需求。假设我有一个图层(例如geojson),它有一个包含大量时间值的“时间”列。我想实现类似slider的功能,它可以根据用户的操作添加/删除功能(或更改其样式)。问题是有一些API可能

javascript - JQuery 动画和 z-index 无法正常工作

我正在尝试制作两个可以通过两个按钮打开和关闭的面板。FIDDLE一切正常,当我这样做时:打开红色面板。打开绿色面板。关闭红色面板。在这种情况下,红色面板在动画期间隐藏在绿色后面。但是当我这样做的时候:打开绿色面板。打开红色面板。关闭绿色面板。在动画过程中,绿色面板总是在红色面板的前面。但第一个打开的面板有z-index:9,第二个打开的面板有z-index:10。请帮我解决这个问题。 最佳答案 之所以超过它是由于html。红色是在绿色之前创建的,所以让它们每次都在彼此“下方”动画的唯一方法是通过if语句以编程方式编辑z-index在

javascript - 启动画面的 ionic 动画

是否可以添加gif或svg动画作为IonicMobileApp的启动画面?我找不到任何解决方案,但它看起来像是一项典型的任务。也许我错过了解决方案。如果我输入.png就可以,但是.png不支持动画。 最佳答案 文档中提到支持的文件只有:png、psd、ai。IonicIconSplashScreen如果你想自定义,试试这个可能对你有帮助:UsingViewsEventsToCreateJavaScriptPureIonicSplashScreen 关于javascript-启动画面的io