href 做导航 特效

时间：2024-01-19 11:41:44
  <div>

      <div>

        <%for (int i = 0; i < 200; i++)

          {

        %><%=i.ToString() %>

        <br />

        <%

          } %>

        <div id="toTopB_blk">11</div>

        <%for (int i = 400; i < 600; i++)

          {

        %><%=i.ToString()%>

        <br />

        <%

          } %>

      </div>

      <a href="#toTopB_blk" class="toTop toTop02">111</a>

    </div>

点击 链接 跳转 到   <div id="toTopB_blk">11</div>  这里。

还可以 借助 css  js 做一些 特效。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="bootstrapLearn.WebForm13" %>

<!DOCTYPE html>

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

<head runat="server">

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

  <title></title>

  <script src="js/jquery.min.js"></script>

  <script>

    ishid = true;

    /*导航滚动效果*/

    function navClarity() {

      var ground = $("#nav-background");

      var nav = $(".nav");

      var logo = $(".brand");

      var winWid = document.documentElement.clientWidth;

      if ($(window).scrollTop() >  || winWid < ) {

        ground.removeClass("nav-clarity");

        ground.addClass("nav-solid");

      } else {

        ground.removeClass("nav-solid");

        ground.addClass("nav-clarity");

      }

    }

    /*下载移入效果*/

    function downloadImg(o) {

      $(o).hover(

        function () {

          //$(this).find("img").stop().fadeIn();

        },

        function () {

          //$(this).find("img").stop().hide();

        }

      )

    }

    /*返回顶部*/

    function toTop() {

      var to01 = $(".toTop01");

      var to02 = $(".toTop02");

      var to = $(".toTop");

      var toB = $(".footer");

      to.hover(

        function () {

          //$(this).find("div").fadeIn();

        },

        function () {

          //$(this).find("div").hide();

        }

      )

      $(window).scroll(function () {

        var st = $(window).scrollTop();

        if (st > document.documentElement.clientHeight) {

          to01.show();

          var toT = parseInt(to01.offset().top);

          var toB1 = parseInt(toB.offset().top);

          var toSH = document.body.scrollHeight - ;

          console.log(toT > toSH, toT, toSH, toB1);

          if (toT > toSH) {

            //to01.hide();

            to02.show().css({ "top": toB1 -  + "px" });

          } else {

            //to01.show();

            // 渐出

            div4click();

            return;

            to02.hide();

          }

        } else {

          div3click();

          return;

          to01.hide();

        }

        if (to02.is(":hidden")) { to01.show(); } else { to01.hide(); }

        if (st < document.documentElement.clientHeight) { to01.hide(); }

      });

    }

    /*锚点*/

    function goto(s) {

      $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');

      $(s).click(function () {

        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

          var $target = $(this.hash);

          $target = $target.length && $target || $('[name=' + this.hash.slice() + ']');

          if ($target.length) {

            var targetOffset = $target.offset().top - ;

            $('html,body').animate({

              scrollTop: targetOffset

            },

            );

            return false;

          }

        }

      });

    }

    //搜索获得焦点

    function searchC() {

      $(".search-help-text").focus(function () {

        $(this).animate({ "width": "460px" });

      }).blur(function () {

        $(this).animate({ "width": "260px" });

      });

    }

    $(document).ready(function () {

      navClarity();/*导航滚动效果*/

      downloadImg(".download-img a");/*下载移入效果*/

      downloadImg(".Download_hp p");

      toTop();/*返回顶部*/

      searchC();/*搜索获得焦点*/

      goto(".toTop");

      goto(".explainGo");

    })

    $(window).resize(function () {

      navClarity();/*导航滚动效果*/

    });

    $(window).scroll(function () {

      navClarity();/*导航滚动效果*/

    });

  </script>

  <script>

    var rotINT, rotINT2, x, n = , y, m = , a = , b = ;

    function div2click() {

      x = document.getElementById("div2");

      clearInterval(rotINT);

      rotINT = setInterval("startRotate()", )

    }

    function div1click() {

      y = document.getElementById("div1");

      clearInterval(rotINT2);

      rotINT2 = setInterval("startRotate2()", )

    }

    function startRotate() {

      n = n +

      x.style.transform = "rotate(" + n + "deg)"

      x.style.webkitTransform = "rotate(" + n + "deg)"

      x.style.OTransform = "rotate(" + n + "deg)"

      x.style.MozTransform = "rotate(" + n + "deg)"

      if (n == ) {

        clearInterval(rotINT)

        if (n == ) { n =  }

      }

    }

    function startRotate2() {

      m = m +

      y.style.transform = "translateX(" + m + "px)";

      y.style.webkitTransform = "translateX(" + m + "px)";

      y.style.OTransform = "translateX(" + m + "px)";

      y.style.MozTransform = "translateX(" + m + "px)";

      if (m == ) {

        clearInterval(rotINT2)

        if (m == ) { m =  }

      }

    }

    function startRotateOut() {

      a = a -

      x.style.transform = "rotate(" + a + "deg)"

      x.style.webkitTransform = "rotate(" + a + "deg)"

      x.style.OTransform = "rotate(" + a + "deg)"

      x.style.MozTransform = "rotate(" + a + "deg)"

      if (a == ) {

        clearInterval(rotINT)

        if (a == ) { a =  }

      }

    }

    function startRotate2Out() {

      b = b -

      y.style.transform = "translateX(" + b + "px)";

      y.style.webkitTransform = "translateX(" + b + "px)";

      y.style.OTransform = "translateX(" + b + "px)";

      y.style.MozTransform = "translateX(" + b + "px)";

      if (b == ) {

        clearInterval(rotINT2)

        if (b == ) { b =  }

      }

    }

    //hid

    function div3click() {

      if (!ishid) {

        div1click();

        div2click();

      }

      ishid = true;

    }

    // show

    function div4click() {

      if (ishid) {

        y = document.getElementById("div1");

        clearInterval(rotINT2);

        rotINT2 = setInterval("startRotate2Out()", )

        x = document.getElementById("div2");

        clearInterval(rotINT);

        rotINT = setInterval("startRotateOut()", )

      }

      ishid = false;

    }

  </script>

  <style>

    #toTopB_blk {

      display: block;

      height: 0px;

      width: %;

      margin:  auto;

      padding: ;

      overflow: hidden;

    }

    .toTop {

      display: none;

      height: 60px;

      width: 60px;

      /*background-image: url(../images/toTop00.png);

      background-repeat: no-repeat;*/

    }

      .toTop div {

        /*display: none;*/

        height: 60px;

        width: 60px;

        /*background-image: url(../images/toTop01.png);

        background-repeat: no-repeat;*/

      }

    .toTop01 {

      position: fixed;

      _position: absolute;

      _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-);

      z-index: ;

      right: 20px;

      bottom: 35px;

    }

    .toTop02 {

      display: none;

      position: absolute;

      z-index: ;

      right: 20px;

    }

  </style>

</head>

<body>

  <form id="form1" runat="server">

    <%----%>

    <div id="dd" style="position: fixed; left: 100px"><input type="button" onclick="div4click()" /></div>

    <div   id="toTopB_blk"></div>

    <a href="#toTopB_blk"  class="toTop toTop01">

      <div id="div1" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">

        <div id="div2"   style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>

      </div>

    </a>

    <a href="#toTopB_blk"   class="toTop toTop02">

      <div id="div3" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">

        <div id="div4" style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>

      </div>

    </a>

    <div>

      <%for (int i = ; i < ; i++)

        {

      %><%=i.ToString() %>

      <br />

      <%

        } %>

    </div>

    <div class="footer">

      <%--<div class="container">

        <div class="row-fluid show-grid">

          <div class="span9">

            <div class="row-fluid">

              <div class="span6">

                <div class="footer-guild">

                  <h6>技术支持服务</h6>

                  <table>

                    <tr>

                      <td>技术支持电话</td>

                      <td>：--</td>

                    </tr>

                    <tr>

                      <td>技术支持QQ</td>

                      <td>：</td>

                    </tr>

                    <tr>

                      <td style="letter-spacing: 0.25em">QQ交流群</td>

                      <td>：</td>

                    </tr>

                    <tr>

                      <td style="letter-spacing: 0.22em">论坛讨论区</td>

                      <td>：

                                    <a href="http://bbs.ikuai8.com/forum.php" target="_blank">bbs.ikuai8.com</a>

                      </td>

                    </tr>

                  </table>

                </div>

              </div>

              <div class="span6">

                <div class="footer-service">

                  <h6>产品销售</h6>

                  <table>

                    <tr>

                      <td class="tt">联系电话</td>

                      <td>：-&nbsp;&nbsp;-</td>

                    </tr>

                    <tr>

                      <td style="letter-spacing: 0.1em">联 系 人</td>

                      <td>：爱快市场</td>

                    </tr>

                    <tr>

                      <td>邮　　箱</td>

                      <td>：<a href="mailto:sales@ikuai8.com">sales@ikuai8.com</a></td>

                    </tr>

                    <tr>

                      <td colspan="">

                        <a href="#" target="_blank">了解我们的商业产品</a>

                      </td>

                    </tr>

                  </table>

                </div>

              </div>

              <div class="footer-guild">

                <div class="span12">

                  <div class="footer-copyright tc">

                    <span onclick="$('#login').show()">(C)版权所有</span>　iKuaiCopyright(C) All Rights Reserved 京ICP备13001110号

                  </div>

                </div>

              </div>

            </div>

          </div>

          <div class="span3">

            <div class="footer-logo fc">

              <a class="" href="#">

                <img src="img/logo-small.png" /></a>

              <img src="img/qrCode.png" />

            </div>

          </div>

        </div>

      </div>--%>

    </div>

  </form>

</body>

</html>

相关文章