zoukankan      html  css  js  c++  java
  • href 做导航 特效

      <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() > 30 || winWid < 960) {
            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 - 380;
              console.log(toT > toSH, toT, toSH, toB1);
              if (toT > toSH) {
                //to01.hide();
                to02.show().css({ "top": toB1 - 80 + "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(1) + ']');
              if ($target.length) {
                var targetOffset = $target.offset().top - 100;
                $('html,body').animate({
                  scrollTop: targetOffset
                },
                1000);
                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 = 0, y, m = 0, a = 360, b = 70;
        function div2click() {
          x = document.getElementById("div2");
          clearInterval(rotINT);
          rotINT = setInterval("startRotate()", 1)
        }
    
        function div1click() {
          y = document.getElementById("div1");
          clearInterval(rotINT2);
          rotINT2 = setInterval("startRotate2()", 10)
        }
    
        function startRotate() {
          n = n + 2
          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 == 360) {
            clearInterval(rotINT)
            if (n == 360) { n = 0 }
          }
        }
        function startRotate2() {
          m = m + 1
          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 == 70) {
            clearInterval(rotINT2)
            if (m == 70) { m = 0 }
          }
        }
    
    
    
        function startRotateOut() {
          a = a - 2
          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 == 0) {
            clearInterval(rotINT)
            if (a == 0) { a = 360 }
          }
        }
    
        function startRotate2Out() {
          b = b - 1
          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 == 0) {
            clearInterval(rotINT2)
            if (b == 0) { b = 70 }
          }
        }
        //hid
        function div3click() {
          if (!ishid) {
            div1click();
            div2click();
          }
          ishid = true;
        }
        // show
        function div4click() {
          if (ishid) {
            y = document.getElementById("div1");
            clearInterval(rotINT2);
            rotINT2 = setInterval("startRotate2Out()", 10)
    
            x = document.getElementById("div2");
            clearInterval(rotINT);
            rotINT = setInterval("startRotateOut()", 1)
          }
          ishid = false;
    
    
        }
      </script>
      <style>
        #toTopB_blk {
          display: block;
          height: 0px;
           90%;
          margin: 0 auto;
          padding: 0;
          overflow: hidden;
        }
    
        .toTop {
          display: none;
          height: 60px;
           60px;
          /*background-image: url(../images/toTop00.png);
          background-repeat: no-repeat;*/
        }
    
          .toTop div {
            /*display: none;*/
            height: 60px;
             60px;
            /*background-image: url(../images/toTop01.png);
            background-repeat: no-repeat;*/
          }
    
        .toTop01 {
          position: fixed;
          _position: absolute;
          _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-35);
          z-index: 200;
          right: 20px;
          bottom: 35px;
        }
    
        .toTop02 {
          display: none;
          position: absolute;
          z-index: 200;
          right: 20px;
        }
      </style>
    </head>
    <body>
      <form id="form1" runat="server">
        <%--48--%>
        <div id="dd" style="position: fixed; left: 100px">111<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;  50px">
            <div id="div2"   style="background-image: url(11/top_button2.png); height: 50px;  50px"></div>
          </div>
        </a>
        <a href="#toTopB_blk"   class="toTop toTop02">
          <div id="div3" onclick="" style="position: fixed; right: 10px; height: 50px;  50px">
            <div id="div4" style="background-image: url(11/top_button2.png); height: 50px;  50px"></div>
          </div>
        </a>
        <div>
          <%for (int i = 0; i < 200; 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>:400-877-3227</td>
                        </tr>
                        <tr>
                          <td>技术支持QQ</td>
                          <td>:4008773227</td>
                        </tr>
                        <tr>
                          <td style="letter-spacing: 0.25em">QQ交流群</td>
                          <td>:425028726</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>:010-57484276&nbsp;&nbsp;010-58483454</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="2">
                            <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)2012 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>
  • 相关阅读:
    三次请求(读-改-读)引出nibernate 一级缓存
    算法竞赛入门经典第一、二章摘记
    uva 10905 Children's Game
    uva 11205 The broken pedometer
    uva 10160 Servicing stations
    uva 208 Firetruck
    uva 167 The Sultan's Successors
    zoj 1016 Parencodings
    uva 307 Sticks
    uva 216 Getting in Line
  • 原文地址:https://www.cnblogs.com/bingguang/p/4165148.html
Copyright © 2011-2022 走看看