Question

我创建了一个画廊和按钮来控制画廊。我是jquery的新手，并使用一个小脚本在div容器上更改固定金额。该脚本运行良好，但它延伸到div内容的顶部和底部。我会为div设置一个特定的大小，但想法是在具有不同内容量的多个页面上使用它。如何限制按钮功能不会扩展到div内的内容？

gc

我用我的页面内容制作了jsfiddle。任何帮助将不胜感激。这是我第一次使用html5，CSS3和jquery从头开始。这是一次学习经历。：）

提前致谢

Answer 1

只需添加一些if语句：

更新了小提琴：https://jsfiddle.net/2LcumL6p/4/

$('.scrolltdup').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) < 0) {
        $('.wrap').animate({
            marginTop: "+=160px"
        }, "fast");
    }
});

$('.scrolltddown').click(function(event) {
    event.preventDefault();
    if (parseInt($('.wrap').css('margin-top')) > -($('.wrap').height() - 160)) {
        $('.wrap').animate({
            marginTop: "-=160px"
        }, "fast");
    }
});

Answer 2

容器是固定形状，一次显示3个可见框，因此您可以使用var totalRows = Math.max( $(".box").length / 3 )获得3个套数。

从那里，您可以在项目用完之前推断出最大marginTop，并在动画制作之前测试marginTop。在页面加载时检测maxScroll和minScroll的最小方法（将它们设置为最大和最小marginTop），然后将三元运算符放入动画代码中。

更改marginTop: "+=160px"

致marginTop: "+=" + ( $(".wrap").css( "margin-top" ) > maxScroll ? "0px" : "160px";

并对marginTop: "-=160px"执行相同操作。

Answer 3

考虑每行将有两个Div with class box这里是一个工作代码，它将找到两个div的最大高度并相应地设置动画

var presentRow=1;
function getHeight(elem1,elem2){
  return Math.max($(elem1).outerHeight(),$(elem2).outerHeight())+10;
}

$('.scrolltdup').click(function(event) {
      event.preventDefault();

      height=getHeight($(".wrap .box:nth-child("+presentRow+")"),$(".wrap .box:nth-child("+(presentRow+1)+")")); 
      $('.wrap').animate({
        marginTop: "+="+height+"px"
      }, "fast",function(){
          presentRow=presentRow-2;
      });

   });
   $('.scrolltddown').click(function(event) {
      event.preventDefault();

 height=getHeight($(".wrap .box:nth-child("+presentRow+")"),$(".wrap .box:nth-child("+(presentRow+1)+")")); 
      $('.wrap').animate({
        marginTop: "-="+height+"px"
      }, "fast",function(){
          presentRow=presentRow+2;
      });
   });

您也可以通过检查presentRow变量来添加一些验证。

如何将jquery脚本限制为容器div的大小

3 个答案: