• 锚点


    一、介绍

    有两种使用<a>标签的方式:

    1、通过href属性——创建指向另一个文档的链接

    2、通过使用name属性——创建文档内的书签

    name属性规定锚(anchor)的名称。

    1、name定位

    使用name,只能在<a>标签上用,所以总结为“a标签+name属性”。

    2、ID定位

    使用id可以在任意标签使用。

    3、js定位

    使用js使用scroollIntoView将对象滚动到可见范围内。

    例子如下:“到top”使用id,“到content”使用a标签+name属性,“到bottom”使用js代码。

    <!doctype html>  
    <html>
    <title>锚点 by starof</title>  
    <meta charset="utf-8"/>  
    <style type="text/css">
    .cls1,.cls2,.cls3{
      width: 500px;
      height: 600px;
    }
    .cls1{
      background-color: red;
    }
    .cls2{
      background-color: green;
    }
    .cls3{
      background-color: blue;
    }
    
    </style>
    <body>
    <a href="#top">到top</a><br/>
    <a href="#content">到content</a><br/>
    <a onclick="javascript:document.getElementById('here').scrollIntoView()" style="cursor:pointer;">到bottom</a>
    <div id="top"  class="cls1">top内容
    </div>
    <div name="content" class="cls2"><a name="content">content内容</a><br/>
    name属性只对&lt;a&gt;标签有用。<br/>
    可以通过给div增加name="content" ,删除内部超链接查看。
    </div>
    <div id="here"  class="cls3">bottom内容
    </div>
    </body>
    <script type="text/javascript">
      
    </script>
    </html>

    二、用锚点实现的选项卡效果

    张鑫旭有这样一个demo,代码:

    <!doctype html>
    <html>
      <title>锚点 by starof</title>
      <meta charset="utf-8"/>
      <style type="text/css">
    .box{
      width: 200px;
      height: 100px;
      border: 1px solid #ddd; 
      overflow: hidden;
    }
    .list{
      width: 200px;
      height: 100px;
      line-height: 100px;
      background-color: #eee;
      font-size: 80px;
      text-align: center;
    }
    .link{
         width:200px;
         padding-top:10px;
         text-align:right;}
    .click{
      display:inline-block; 
      width:20px; 
      height:20px; 
      line-height:20px; 
      border:1px solid #ccc; 
      background:#f7f7f7; 
      color:#333; 
      font-size:12px; 
      font-weight:bold; 
      text-align:center; 
      text-decoration:none;}
    .click:hover{
      background:#eee; 
      color:#345;}
    </style>
    <body>
      <div class="box">
        <div class="list" id="one">1</div>
        <div class="list" id="two">2</div>
        <div class="list" id="three">3</div>
        <div class="list" id="four">4</div>
      </div>
      <div class="link">
        <a class="click" href="#one">1</a>
        <a class="click" href="#two">2</a>
        <a class="click" href="#three">3</a>
        <a class="click" href="#four">4</a>
      </div>
      <script type="text/javascript"></script>
    </body>
    </html>

    效果如下:点我查看

    正美用锚点做了这样一个效果:

    代码如下:

    <!doctype html>
    <html>
      <title>锚点 by starof</title>
      <meta charset="utf-8"/>
      <style type="text/css">
    dl {/*相册*/
      position:relative;
      width:160px;
      height:142px;
      border:10px solid #EFEFDA;/*相册边框*/
    }
    dd {/*相册的内容显示区,包含相片与下面的翻页栏*/
      margin:0;/*去除浏览器的默认设置*/
      padding:0;/*去除浏览器的默认设置*/
      width:160px;
      height:120px;
      overflow:hidden;/*重点,让每次只显示一张图片*/
    }
    img {
      border:2px solid #000;/*增加立体感*/
    }
    dt {/*翻页栏*/
      position:absolute;
      right:0px;
      bottom:0px;
      /*上面三步是用于把它固定于图片下方*/
      width:160px;
      height:22px;
      background:#FBFBEA;
    }
    a {
       display:block;/*让其拥有盒子模型*/
       float:right;
       margin:2px;/*错开格子*/
       width:18px;/*呈正方形*/
       height:18px;
       text-align:center;/*居中显示*/
       color:#fff;/*默认是蓝色,所以一定要重写*/
       text-decoration:none;/*消除下划线*/
       background:#666;
       filter:alpha(opacity=70);
       opacity:.7;
     }
     a:hover {
       background:#000
     }
    </style>
    <body>
    <dl>
    <dt>
      <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a>
    </dt>
    <dd>
     <img id="index1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" />
        <img id="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" />
        <img id="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" />
        <img id="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" />
        <img id="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" />
        <img id="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" />
      </dd>
    </dl>
    </body>
    </html>
    View Code

    效果:

    原文

    另参考

    http://www.impressivewebs.com/javascript-content-switcher-without-javascript/ http://www.impressivewebs.com/demo-files/content-switcher/#five

  • 相关阅读:
    jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)
    Angular4.0 项目报错:Unexpected value xxxComponent' declared by the module 'xxxxModule'. Please add a @Pipe...
    数据库表约束的创建与使用之主键约束
    从零开始学虚拟DOM
    Typescript项目注意点和基本类型介绍
    JS操作符
    sass @function,@for,@mixin 的应用
    关于web优化(一)
    typescritp 导出默认接口
    The stacking context
  • 原文地址:https://www.cnblogs.com/starof/p/4494742.html
Copyright © 2020-2023  润新知