点击上下滑动

Question

点击上下滑动

༺ཌ༈轻々のい风༈ད༻

11

发布于
2021-02-01

新手上路，请多包涵

题目描述

利用JavaScript如何做到点击按钮上下滑动，点击一个按钮时，让图片或者其他向下滑动滚动，点击另一个按钮时，让图片或者其他向上滑动滚动，注意滑动滚动的图片或者其他宽高不一致哦

题目来源及自己的思路

题目来源于图片轮播图，
思路嘛就是让图片或者其他上下滑动滚动

相关代码

<tbody class="qita_0" style="top: 0px;">
    <tr>
        <td colspan="4" align="center" style="font-size: 18px;">border 线型</td>
    </tr>
    <tr class="beijing">
            <td><span>solid</span></td>
            <td><font title="实线">实线</font></td>
            <td><span>dotted</span></td>
            <td><font title="用点连成线">用点连成线</font></td>
    </tr>
    <tr>
            <td><span>dashed</span></td>
            <td><font title="虚线，用线条连成线">虚线，用线条连成线</font></td>
            <td><span>double</span></td>
            <td><font title="双实线">双实线</font></td>
        </tr>
        <tr class="beijing">
            <td><span>groove</span></td>
            <td><font title="凹实线">凹实线</font></td>
            <td><span>ridge</span></td>
            <td><font title="凸实线">凸实线</font></td>
        </tr>
        <tr>
            <td><span>inset</span></td>
            <td><font title="嵌入式，犹如渐变">嵌入式，犹如渐变</font></td>
            <td><span>outset</span></td>
            <td><font title="嵌出式，反向渐变">嵌出式，反向渐变</font></td>
        </tr>
    </tbody>
    <tbody class="qita_1">
        <tr class="beijing">
            <td colspan="4" align="center" style="font-size: 18px;">设置滚动条</td>
        </tr>
                        <tr>
                            <td><span>overflow</span></td>
                            <td><font title="设置滚动条">设置滚动条</font></td>
                            <td><span>visible</span></td>
                            <td><font>不剪切内容,超出背景颜色不加滚动条</font></td>
                        </tr>
                        <tr class="beijing">
                            <td><span>auto</span></td>
                            <td><font title="内容超出容器自动加滚动条">内容超出容器自动加滚动条</font></td>
                            <td><span>hidden</span></td>
                            <td><font title="超出背景是不显示，会被隐藏">超出背景是不显示，会被隐藏</font></td>
                        </tr>
                        <tr>
                            <td><span>overflow-x</span></td>
                            <td><font title="横向滚动条">横向滚动条</font></td>
                            <td><span>overflow-y</span></td>
                            <td><font title="纵向滚动条">纵向滚动条</font></td>
                        </tr>
                        <tr class="beijing">
                            <td><span>scroll</span></td>
                            <td><font title="总显示滚动条，一直显示">总显示滚动条，一直显示</font></td>
                            <td><span></span></td>
                            <td><font></font></td>
                        </tr>
                    </tbody>
            </table></div>

.neirong{

width: 100%;
height: 203px;
overflow: hidden;
position: relative;

}
.anniu1,.anniu2{

text-align: center;
cursor: pointer;

}
var e=0;

var jia=true;
var gao=['203px','203px'];
$(".qita_0").next().css({"top":gao[e]})
$(".anniu2").click(function(){
    if(jia){
        $(".qita_0").css({"transition":"all 2s","top":"-203px"})
        e++;
        jia=false;
        
    }
    for(var i=0;i<2;i++){
        var qt=$(".neirong").find(".qita_"+i)
        if(e==i){
            $(".neirong").height(gao[i])
            qt.animate({top:'203px',opacity:'1'},"slow");
            qt.animate({top:'0px',opacity:'1'},"slow");
        }else{
            qt.animate({top:'-203px',opacity:'0'});
            qt.animate({top:'203px',opacity:'0'});
        }
    }
    e++
    if(e>=2){
        e=0;
        
    }
})