草庐IT

滚动动画

全部标签

javascript - 如何在我的 javascript 球移动时为它提供滚动动画?

我有以下HTML代码:这是一个包含球图像的div(一个球的俯View)这个球我可以用我的箭头键和一些javacript向上、向左、向右、向下等等移动。我用这段代码来做到这一点:varball=function(){varinited=false,el,xcheck=50,x=50,ycheck=50,y=50,xspeed=0,yspeed=0,power=0.4,friction=0.99,xwind=0,ywind=0,dead=true,timer=function(keys){if(dead===true){return;}if(keys[38]===true){yspeed+

javascript - 在 AngularJS 中使用 ngInfiniteScroll 指令实现反向无限滚动

我想使用此处的ngInfiniteScroll指令:http://binarymuse.github.io/ngInfiniteScroll/在我的angularjs应用程序中实现反向无限滚动(就像在聊天小部件中一样)。然而,该指令的文档似乎并未提及如何实现这一点。它只记录了标准无限滚动是如何实现的。有人可以在这方面指导我吗?谢谢!P.S:我热衷于使用这个指令,因为它处理DOM控件;来自Angular标准无限滚动指令在我滚动时不断创建DOM元素,这些元素永远不会被删除。 最佳答案 我认为您应该采用基于模型的方法(特别适合Angula

javascript - 为 Owl Carousel 添加动画字幕

我正在使用OwlCarousel并一直在尝试添加动画字幕(只是幻灯片显示上的简单淡入淡出)但似乎无法弄清楚如何去做。我将所有字幕的不透明度设置为0,然后向字幕添加一个名为“animate-me”(使用jQuery)的类。第一个淡入,然后所有其他不断显示。这是我目前在jsbin上的内容...http://jsbin.com/OGehUKEh/3/edit 最佳答案 您需要使用OwlCarousel回调。我找到了你需要的回调。$("#owl-example").owlCarousel({beforeMove:function(){//B

javascript - 如何通过动画更改 Snap.svg 中多边形的点?

我正在尝试实现一个带有特定多边形的按钮,按下该按钮会将多边形更改为其他内容。例如,按钮上的播放图标变为停止图标。理想情况下,该图标应该是一个多边形,其中三个点描绘了游戏符号。动画后它变成一个四点多边形(一个正方形)描绘停止符号。我试过这样做:varpaper=Snap('svg');vartpts=[100,100,100,130,120,115];varsqpts=[100,100,100,130,130,130,130,100];vartri=paper.polygon(sqpts);tri.attr({id:"tri",fill:"#555555"});sqrFunc=funct

javascript - Owl Carousel 滚动到点击的项目

我有一个简单的OwlCarousel,HTML:123456789101112JavaScript:$('.owl-carousel').owlCarousel({items:5,loop:true,nav:true,margin:10})包括:owl.carousel.jsowl.carousel.min.cssJSFiddlehttp://jsfiddle.net/93cpX/62/如何强制轮播滚动到点击的项目? 最佳答案 .owl-carousel.item{height:80px;background:#4DC7A0;}12

javascript - 如何在 PhantomJS 中滚动以触发延迟加载?

我在使用PhantomJS触发滚动延迟加载时遇到问题。以前的答案(甚至接受的答案)都不适合我。大多数是针对旧的PhantomJS版本。其他问题-与我的问题几乎相同或相似,但答案无效或无效:notabletolazyloadinphantomjsHowtoscrolldownwithPhantomjstoloaddynamiccontenthttps://github.com/ariya/phantomjs/issues/11512他们都试图利用window.document.body.scrollTop=document.body.scrollHeight和page.evaluate(

javascript - 是否可以在单击时将类(特别是其动画)重置回其初始状态

我有一个动画脚本,它应该根据鼠标事件(如鼠标移动、单击等)更改div的动画。一个问题是每次单击div时都应该启动动画。在Chrome中,唯一可用于测试的浏览器*(阅读底部的说明),这不起作用://Thenon-clickedclassis"notClicked"//Theclickedclassis"clicked"//Thewillbereferredtoaselemelem.onclick=function(){elem.className="notClicked";elem.className="clicked";}当该元素被点击一次时,它按预期工作,但如果它被点击两次(触发两个

javascript - 有没有办法让两个 jQuery 动画同时(正确地)运行?

我有一个调用两个动画Action的事件监听器。不幸的是,它们的开始有少量错开(例如,函数中的第一个首先开始)。有谁知道正确同步它们的方法吗?这是我的代码:$("#navullia").hover(function(){$(lastBlock).children("div").animate({width:"0px"},{queue:false,duration:400,easing:"swing"});$(this).children("div").animate({width:maxWidth+"px"},{queue:false,duration:400,easing:"swing

javascript - 滚动页面以便元素可见

我刚刚尝试了原型(prototype)的scrollTo功能,正如文档所述,它Scrollsthewindowsothatelementappearsatthetopoftheviewport我想要一个函数仅当元素在视口(viewport)中不完全可见时才滚动滚动使元素出现在视口(viewport)的中心有谁知道原型(prototype)、脚本或独立的这样一个功能? 最佳答案 我猜你需要这样的东西(demo):窗口高度functiongetWindowHeight(){varbody=document.body;vardocEl=d

javascript - JS - 100% 且无滚动的 iframe 高度(正文中的 Scroll-y)

我有一个iframe问题。首先,我在https://stackoverflow.com/search?tab=relevance&q=iframe%20height中搜索关键字iframeheight但我没有找到我需要的人。如何制作一个高度为100%且无滚动的iframe。在正文中滚动Y。如果我通过http://www.google.com搜索某些内容在iframe中,之后转到google搜索结果页面。iframe将计算新的高度并且iframe高度仍然为100%,正文部分的滚动条。(我希望一些帮助不仅在ie和firefox中,而且在safari和chrome中都能完美工作)。非常感谢。