zoukankan      html  css  js  c++  java
  • 滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jq1.6.js"></script>

    <title>无标题文档</title>

    </head>

    <body style="height:5000px;background:#CCC">

    <style>

    *{margin:0;padding:0;border:none}

      #jumpbar{400px; margin:0 auto; background:url(http://www.7gege.com/template/shop/images/jumpbar.gif) no-repeat; height:179px; position:absolute; left:20px}

      #jumpbar a { display:block; 25px; height:25px;  }

      </style>

       <div id="jumpbar">

          <a href="javascript:void(0)"></a><a href="javascript:void(0)"> <a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a>

          </div>

        <script>

            $(function(){

    var _go = [0,1017,1556,2205,3090,3968,$(document).height()];

      var $jumpbar = $("#jumpbar"),

                    $window = $(window),

                    offset = $jumpbar.offset(),

                    topPadding = 100,

    jL = $("#jumpbar a").length;

                $(window).scroll(

                        function()

                        {

                            if($window.scrollTop() > offset.top)

                            {

                                $jumpbar.stop().animate(

                                        {

                                            top:$window.scrollTop()-offset.top + topPadding

                                        },500

                                );

                            }

                            else

                            {

                                $jumpbar.stop().animate(

                                        {

                                            top:0

                                        }

                                )

                            }

                        }

                )

    for(var i = 0; i <jL;i++)

    {

    $("#jumpbar a:nth-child("+(i+1)+")").bind("click",function(i){ return function(){$("html,body").stop().animate({scrollTop:_go[i]},500)}}(i),false);

    }

            });

        </script>  

        <div style="height:4000px; background:#999;"    ></div>

    </body>

    </html>

  • 相关阅读:
    iphone界面详解
    Spring jdbcTemplate.queryForInt(sql)的奇怪问题,呵呵
    BCP 高效批量导入
    eclipse中javascript显示为乱码的解决办法
    spring jdbcTemplate返回RS
    Spring IOC DI 形象理解
    MOSS 2007 文档库事件处理
    showModalDialog和showModelessDialog使用心得
    XMLHTTP.open权限不够的解决
    体现JAVA中的面向对象思想,接口(抽象类)的用处 :饲养员给动物喂食物
  • 原文地址:https://www.cnblogs.com/jinbiao/p/2152148.html
Copyright © 2011-2022 走看看