西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > ecshop教程 >

实现ecshop首页增加楼层直达效果分析(2)

时间:2015-10-02 12:39来源:未知 作者:好模板 点击:
最后是JS脚本:[我一般都放在 /body之前] XHTML script jQuery(document).ready(function($) { try{ var f1 = $(.j_FloorItem[data-slide=1]).offset().top; var fs = $(.navigation).children().size

最后是JS脚本:[我一般都放在 /body 之前]

XHTML

<script>
    jQuery(document).ready(function($) {
        try{
            var f1 = $('.j_FloorItem[data-slide="1"]').offset().top;
            var fs = $('.navigation').children().size();
            var fss = new Array();
            for (i = 0; i < fs; i++) {
                j = i + 1;
                fss[i] = $('.j_FloorItem[data-slide="' + j + '"]').offset().top;
            }



            $(window).scroll(function(){
                var currentTOP = $(window).scrollTop();
                if(currentTOP>f1-30){
                    $("#nav").show();
                }else{
                    $("#nav").hide();
                }
                if (currentTOP <= f1) {
                    $('.navigation li').removeClass('current');
                    $('.navigation li[data-slide="1"]').addClass('current');
                    return;
                }else{
                    changefl(getFloor(currentTOP));
                }
            });


            function getFloor(fh){
                if(fs==0||fh<=f1){
                    return 1;
                }
                if(fh>=fss[fs-1]){
                    return fs;
                }
                for (k=0; k<fs;k++) {
                    if(fh>fss[k]&&fh<fss[k+1]){
                        return k+1;
                    }
                }
            }

            function changefl(fno){
                $('.navigation li').removeClass('current');
                $('.navigation li[data-slide="'+fno+'"]').addClass('current');
            }

        }catch(e){
            console.log(e);
        }
    });

    function gotop() {
        $('body,html').animate({
            scrollTop : 0
        }, 800);
    }
    function gotofloor(thiz) {
        $("li[class='current']").attr('class', '');
        $(thiz).attr("class", "current");
        dataslide = $(thiz).attr('data-slide');
        var pos = $('.j_FloorItem[data-slide="' + dataslide + '"]').offset().top;// 获取该点到头部的距离
        $("html,body").animate({
            scrollTop : pos
        },300);
    }
</script>

至于 css 样式不赘述,另外代码不可重用,需要根据自己的实际情况

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(2)
100%
------分隔线----------------------------