首页 > 代码库 > a标签做锚点 图片切换
a标签做锚点 图片切换
一.a标签设置锚点
1、使用id定位：
<a href="#fifth">锚点跳到5F</a><p style="height: 1300px"> 中间有很多内容</p><div id="fifth" style="height: 1300px"> 这里是5F的内容</div>
这样的定位可以针对任何设置Id属性的标签来定位。
2、使用a标签的属性name定位：
<a href="#fifth">锚点跳到5F</a><p style="height: 1300px"> 中间有很多内容</p><a name="fifth" > 这里是5F的内容</a><div style="height: 1300px"> 这里是6F的内容 </div>
使用name属性只能针对a标签来定位，而对其他标签就不能起到定位作用。
3注意：锚点也可以跳转到其他网页，在“#”前面写网页
<div> <a href="http://www.mamicode.com/photo/maodian.html#fifth">锚点跳到5F</a> </div>
跳到相对路径about/index.html页面的fifth
常常用于返回头部，返回主页，
二应用： 图片切换
（1）先布局，每张图片都有左右两个锚点（a标签跳转）。点击左右小图片可以跳转到对应中心图片
（2）给父容器.wrap设合适的宽高，设置 overflow: hidden，使之实现——点击图片切换
（3）源代码
<ul class="wrap"> <li id="pic1"><img class="Picture" src="http://www.mamicode.com/images/pic1.jpg" alt="图片1"/> <a href="http://www.mamicode.com/#pic9" class="left"> <img src="http://www.mamicode.com/images/pic9.jpg"/> </a> <a href="http://www.mamicode.com/#pic2" class="right"> <img class="right" src="http://www.mamicode.com/images/pic2.jpg"> </a> </li> <li id="pic2"><img class="Picture" src="http://www.mamicode.com/images/pic2.jpg" alt="图片2"/> <a href="http://www.mamicode.com/#pic1" class="left"> <img src="http://www.mamicode.com/images/pic1.jpg"/> </a> <a href="http://www.mamicode.com/#pic3" class="right"> <img class="right" src="http://www.mamicode.com/images/pic3.jpg"> </a> </li> <li id="pic3"><img class="Picture" src="http://www.mamicode.com/images/pic3.jpg" alt="图片3"/> <a href="http://www.mamicode.com/#pic2" class="left"> <img class="right" src="http://www.mamicode.com/images/pic2.jpg"> </a> <a href="http://www.mamicode.com/#pic4" class="right"> <img class="right" src="http://www.mamicode.com/images/pic4.jpg"> </a> </li> <li id="pic4"><img class="Picture" src="http://www.mamicode.com/images/pic4.jpg" alt="图片4"/> <a href="http://www.mamicode.com/#pic3" class="left"> <img class="right" src="http://www.mamicode.com/images/pic3.jpg"> </a> <a href="http://www.mamicode.com/#pic5" class="right"> <img class="right" src="http://www.mamicode.com/images/pic5.jpg"> </a> </li> <li id="pic5"><img class="Picture" src="http://www.mamicode.com/images/pic5.jpg" alt="图片5"/> <a href="http://www.mamicode.com/#pic4" class="left"> <img class="right" src="http://www.mamicode.com/images/pic4.jpg"> </a> <a href="http://www.mamicode.com/#pic6" class="right"> <img class="right" src="http://www.mamicode.com/images/pic6.jpg"> </a> </li> <li id="pic6"><img class="Picture" src="http://www.mamicode.com/images/pic6.jpg" alt="图片6"/> <a href="http://www.mamicode.com/#pic5" class="left"> <img class="right" src="http://www.mamicode.com/images/pic5.jpg"> </a> <a href="http://www.mamicode.com/#pic7" class="right"> <img class="right" src="http://www.mamicode.com/images/pic7.jpg"> </a> </li> <li id="pic7"><img class="Picture" src="http://www.mamicode.com/images/pic7.jpg" alt="图片7"/> <a href="http://www.mamicode.com/#pic6" class="left"> <img class="right" src="http://www.mamicode.com/images/pic6.jpg"> </a> <a href="http://www.mamicode.com/#pic8" class="right"> <img class="right" src="http://www.mamicode.com/images/pic8.jpg"> </a> </li> <li id="pic8"><img class="Picture" src="http://www.mamicode.com/images/pic8.jpg" alt="图片8"/> <a href="http://www.mamicode.com/#pic7" class="left"> <img class="right" src="http://www.mamicode.com/images/pic7.jpg"> </a> <a href="http://www.mamicode.com/#pic9" class="right"> <img class="right" src="http://www.mamicode.com/images/pic9.jpg"> </a> </li> <li id="pic9"><img class="Picture" src="http://www.mamicode.com/images/pic9.jpg" alt="图片9"/> <a href="http://www.mamicode.com/#pic8" class="left"> <img src="http://www.mamicode.com/images/pic8.jpg"/> </a> <a href="http://www.mamicode.com/#pic1" class="right"> <img class="right" src="http://www.mamicode.com/images/pic1.jpg"> </a> </li> </ul>
/* end reset css */ .wrap{ width: 900px; height: 700px; margin:0 auto; overflow: hidden; } .wrap li{ width:100%; height:100%; background-color: #cecece; } /* 给中心图片左右小锚点设置定位。当然也可以是其他方式，如浮动*/ .wrap li{ position: relative;} .wrap li .Picture, .wrap li a{ position: absolute; } .wrap li .Picture{ top: 50%; left: 50%; margin-left: -300px; margin-top: -230px; width:600px; height: 460px; } .wrap li a{ top: 40%; width:150px; height: 200px; } .wrap a.left{ left: 0; } .wrap a.right{ right: 0; } .wrap a img{ width: 100%; height: 100%;}
参考： http://www.jb51.net/web/170879.html
a标签做锚点 图片切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。