草庐IT

滚动动画

全部标签

javascript - 你如何使用 jQuery 加速动画中间动画?

假设你有一个像这样的特定时间运行的动画:$('span').animate({opacity:1},10000);动画很长,因此用户尝试再次单击按钮。动画已经播放了一定的时间,每次可能都不一样。在第二次点击时是否可以更新动画过程,在用户点击时保持对象的不透明度,只是改变完成所需的时间?基本上我想在动画中途更新动画过程。 最佳答案 您可以使用animate的step选项来跟踪动画的进度。然后根据这些信息,您可以计算动画中剩余的时间。然后停止当前动画并开始一个持续时间减半的新动画。http://jsfiddle.net/MdD45/编辑

javascript - jquery如何检查滚动条是否几乎向下

有很多网站(例如www.9gag.com)会检查您的滚动百分比并确定您是否下降了80%。如果是这样,它会显示更多内容。我希望看到的代码示例:$(window).scroll(function(){if(scroll.height>=80%){//thescrollisabout80%down.}});我想知道如何检查滚动条是否像那些网站一样下降了80%左右? 最佳答案 您检查页面的高度是多少,并将此值与当前位置进行比较。如果当前位置是高度的80%,则运行一些代码。$(window).scroll(function(){varcont

javascript - d3 - sunburst - 给定更新数据的过渡 - 尝试动画,而不是捕捉

我正在研究基于MikeBostock的ZoomableSunburst的旭日形可视化。示例。我希望能够使用全新的JSON(具有相同的结构但“大小”值不同)更改基础数据,并让旭日动画转换以反射(reflect)更新后的数据。如果我使用.data()更改路径元素的数据,然后尝试以下列方式更新:path.data(partition.nodes(transformed_json)).transition().duration(750).attrTween("d",arcTween(transformed_json));(..这与点击fn的代码几乎完全相同)functionclick(d){p

javascript - 使用 window.scrollBy 平滑滚动

我正在尝试使用setInterval()和window.scrollBy()平滑地滚动页面我会使用jQuery的animate函数,但动画需要连续且无限循环(页面内容将是无限的)。这个想法相当简单:varx=1;vary=1;setInterval(function(){window.scrollBy(0,x);},y);如何在不使动画显得跳动的情况下提高滚动速度?我遇到了两个问题:setInterval()不能采用小于1的Y值(或者可能接近30,具体取决于浏览器限制)增加X的值会导致动画跳动(由于像素被完全跳过)这里有一个fiddle可以用来做实验:http://jsfiddle.n

javascript - 如何在窗口滚动时上下移动div

我有一个jquery函数,可以在滚动页面时上下移动一些div,这里是代码->$(window).scroll(function(){$(".mydiv").css({"margin-top":($(window).scrollTop())+"px","margin-left":($(window).scrollLeft())+"px"});});上面的代码只适用于一个div,比如->ThisdivworksThisdivtakesahighdistancefromabovedivandgoesdown$(window).scroll(function(){$(".mydiv").css

javascript - 为滚动添加弹跳效果

我正在尝试创建一种平滑的滚动体验**,并在用户过度滚动时产生反弹效果,即过度滚动到底部或顶部。Thisanswer回答如何平滑滚动,但我也试图在滚动出界时反弹。像这样:注意。虽然此gif显示的是移动设备,但我想在所有浏览器、桌面和移动设备上实现它。我尝试将以下代码添加到间隔中://50=Paddingif(tgt.scrollToptgt.scrollHeight-tgt.offsetHeight-50){pos=Math.bounce(step++,start,change,steps);}else{pos=Math.easeOut(step++,start,change,steps

javascript - 谷歌图表时间轴水平滚动

我有一个时间线图表,与本页的第一个示例(https://developers.google.com/chart/interactive/docs/gallery/timeline)非常相似。我在Y轴上有事件(做午餐、吃东西、ecc),在X轴上我有时间。我想启用水平滚动和图表放大/缩小(如本主题中所述Googlecharthorizontalscrollbar)。但我似乎无法让它工作。有什么方法可以在时间线图表上启用水平滚动吗?非常感谢。亚历山德罗 最佳答案 没有标准configurationoptions在Timeline上图表滚动

javascript - 连续运行 jQuery 动画

我有一组淡出动画,之后我想运行一组animation调用。如何确保一个接一个运行?如果我这样做:$(div1).fadeOut(600);$(div2).fadeOut(600);$(div3).fadeOut(600);$(div4).animation({opacity:1},600);$(div5).animation({opacity:1},600);$(div6).animation({opacity:1},600);动画并行运行。上面的代码只是问题的简化/抽象。我无法将所有调用组合到一个函数中,在现实生活中元素的数量是可变的,每个元素都由它自己的类管理。

javascript - 如何防止 Focus() 方法将页面滚动到顶部

我在gridview中设置了一组文本框,我使用Focus()方法在失去预期的文本框后恢复焦点。问题是:页面(可滚动),当我调用Focus方法时,在文本更改事件中,页面跳转到顶部。这是一种令人困惑的行为。我的问题是:有什么方法可以防止Focus()方法跳转到页面顶部吗?我的代码:protectedvoidtxt_evaluateWeights_TextChanged(objectsender,EventArgse){calc();intindex=((System.Web.UI.WebControls.GridViewRow)(((RadTextBox)sender).Parent.Na

javascript - 当浏览器滚动条出现和消失时保持网页居中

我认为这是一个非常基本的问题。我有一个网站,其中一些页面可能适合浏览器的可视垂直区域,而另一些则不会(很多网站肯定是这样的)。当用户在桌面浏览器上从一个页面浏览到另一个页面时,垂直滚动条会出现和消失,具体取决于页面。其影响是,当用户刚刚选择另一个导航链接时,居中的页面不断移动滚动条的宽度-什么是阻止这种情况发生的最简单方法,而不是让我的所有网页都保持相同的高度?第二部分-为什么桌面浏览器不只保留垂直滚动条区域,也许有办法强制保留它们? 最佳答案 这样做(不适用于IE6):body{overflow-y:scroll;}如果您还想始终