zoukankan      html  css  js  c++  java
  • 点击上下箭头,页码发生改变

    还是看图,channel的length为总页数,向上取整,点击上下箭头,分别向上下滚动,拒绝疯狂点击多次加载事件,细节看代码

        var clickLock = false;
                function calculateScrollTop (symbol) {
                    var limit = 8;   //一页8个channel
                    var itemHeight = 20;  //一个channel高20px
                    var currentPage = $("#home_page").text() * 1; // home_page为当前页    注: *1是直接将text值转化为数字
                    var allPages = Math.ceil(channelData.length / 8);  //向上取整 获取总页数
                    var scrollTop = $('#line').scrollTop();  //获取滚动块的scrollTop值
                    var flag = symbol ? currentPage < allPages : currentPage > 1;    // 根据传入参数判断点击的是上箭头还是下箭头   上箭头为0 下箭头为1
                    if (flag) {
                        var changeTop = 0;
                        var size = (currentPage + (symbol ? 1 : -1)) * limit;
                        if (size > channelData.length) {
                            changeTop = (channelData.length - currentPage * limit) * itemHeight;
                        } else {
                            changeTop = limit * itemHeight;
                        }
                        if (changeTop != 0) {
                            clickLock = true;
                            $('#line').animate({"scrollTop": symbol ? scrollTop + changeTop: scrollTop - changeTop}, 200, 'linear', function () {clickLock = false});
                            $("#home_page").html($("#home_page").text() * 1 + (symbol ? 1: -1));
                        }
                    }
                }
                $("#triangle-down").click(function(){//点击三角箭头向下滚动一页(8个通道)
                    if (clickLock) return;
                    calculateScrollTop(true);
                });
                $("#triangle-up").click(function(){//点击三角箭头向上滚动一页(8个通道)
                    if (clickLock) return;
                    calculateScrollTop(false);
                });

  • 相关阅读:
    echarts-detail---饼图
    echarts-detail--柱状图
    mvc5 错误页如何定义
    MyEclipse编码设置
    java EE 5 Libraries 删掉后怎么重新导入
    Server Library [Apache Tomcat v6.0](unbound)服务未绑定解决办法
    免安装jdk 和 免安装tomcat
    group_concat
    java cookie
    java 分割split
  • 原文地址:https://www.cnblogs.com/fmixue/p/8270522.html
Copyright © 2011-2022 走看看