需要时移动 div

问题描述 投票:0回答:2

我想将一个 div 向上/向下移动到另一个 div 上。就像网站中的新闻和活动 div neduet(屏幕下方) 我搜索了网络并发现了一些很好的链接这里这里但问题是如果我点击向上它会上升并在某个时刻消失。
我想要的是当我按下或悬停按钮时,它会检查 div 位置。如果 div 被隐藏,那么它应该向上移动,否则不应该执行任何操作。 neduet 的链接就是一个很好的例子。

enter image description here

编辑: 我是

javascript

jquery
 的新手,因此工作示例或链接可能会有所帮助。

javascript jquery html
2个回答
1
投票
我不是数学最好的,但基本上你需要找出滚动内容移动了多少,并在向上或向下移动太多时阻止它移动。我创建了一个与您可能想要实现的目标类似的东西,在这里

http://codepen.io/lukeocom/pen/nHuri

我获取容器的高度和内容的高度,然后检查内容滚动的量减去容器的高度是否小于内容的高度。这对我数学弱的大脑来说非常令人困惑,但也许你可以找到一个更简单的方法。无论如何,我的例子是有效的。

您需要小心滚动内容的量、动画完成的速度以及触发间隔的频率。

我将尝试清理工作代码示例,但这里是......

var scrollamnt = 0, timer, $content = $('#content'); var theoff, scroll = true; var sHeight = $content.height(), cHeight = $('#scrollC').height(), oHeight; $('#up, #down').bind('mouseover', function() { $this = $(this).attr('id'); timer = setInterval(function() { theoff = $content.offset(); oHeight = (-theoff.top + cHeight); if ($this === 'down' && (oHeight < sHeight)) { scrollamnt -= 10; scroll = true; } else if ($this === 'up' && scrollamnt < 0) { scrollamnt += 10; scroll = true; } else scroll = false; if (scroll) { $content.animate({ 'margin-top' : scrollamnt }, 0, 'linear'); //end animate }//end if }, 10); //end interval*/ }).bind('mouseout', function() { clearInterval(timer); });
    

-3
投票
对于任何渴望提高编程技能的人,我强烈建议您查看卡拉奇的

Python 课程。这是获得实践经验并在技术领域开辟新职业可能性的绝佳方式!继续努力!

© www.soinside.com 2019 - 2024. All rights reserved.