您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > jQuery特效 >

    jquery页面滚动显示第几步效果

    时间:2014-08-07 08:34 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    效果预览 进入下载地址列表

    jquery页面滚动显示第几步效果jquery页面滚动显示第几步效果是一款基于jQuery实现的仿百度经验页面滚动显示第几步效果代码。jQuery页面滚动滚动条步骤效果

    <script type="text/javascript">
        $(function () {


            $("#ico-group").css("left", ((window.screen.width - 1033) / 2) +42 + "px");
            $("#step div.circle").each(function (index, element) {
                $(element).waypoint(function (direction) {
                    if (direction == "up") {
                        //if (index == 0) {
                        //    $($("#ico-group div").get(index)).css("visibility", "hidden");
                        //}
                        
                        for (var i = 0; i < $("#ico-group div").length; i++) {
                            if (i >= index) {
                                $($("#ico-group div").get(i)).css("visibility", "hidden");
                            }
                            if (i > 0 && i==index) {
                                $($("#ico-group div").get(i-1)).removeClass("gray");
                            }
                        }
                        $(element).css("visibility", "visible");
                    } else {
                        $(element).css("visibility", "hidden");
                        for (var i = 0; i < $("#ico-group div").length; i++) {
                            if (i < index) {
                                $($("#ico-group div").get(i)).addClass("gray");
                            } else if (i == index) {
                                $($("#ico-group div").get(i)).css("visibility", "visible");
                                $($("#ico-group div").get(i)).removeClass("gray");


                            } else {
                                $($("#ico-group div").get(i)).css("visibility", "hidden");
                            }
                        }
                    }


                    $($("#ico-group div").get(index)).unbind("click").bind("click", function() {
                        var _targetTop = $(element).offset().top;//获取位置
                        jQuery("html,body").animate({ scrollTop: _targetTop }, 300);//跳转
                    });


                }, {
                    offset: 0 +index*32
                });
            });
        });
    </script>

    jquery页面滚动显示第几步效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jQuerytexiao/9925.html 源码搜藏承诺:本站所有资源无病毒,无弹窗,无干扰链接!