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="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="images/pic1.jpg" alt="图片1"/>
         <a href="#pic9" class="left">
             <img src="images/pic9.jpg"/>
         </a>
         <a  href="#pic2" class="right">
             <img class="right" src="images/pic2.jpg">
         </a>
     </li>
     <li id="pic2"><img  class="Picture" src="images/pic2.jpg" alt="图片2"/>
         <a href="#pic1" class="left">
             <img src="images/pic1.jpg"/>
         </a>
         <a  href="#pic3" class="right">
             <img class="right" src="images/pic3.jpg">
         </a>
     </li>
     <li id="pic3"><img class="Picture" src="images/pic3.jpg" alt="图片3"/>
         <a  href="#pic2" class="left">
             <img class="right" src="images/pic2.jpg">
         </a>
         <a  href="#pic4" class="right">
             <img class="right" src="images/pic4.jpg">
         </a>
     </li>
     <li id="pic4"><img class="Picture" src="images/pic4.jpg" alt="图片4"/>
         <a  href="#pic3" class="left">
             <img class="right" src="images/pic3.jpg">
         </a>
         <a  href="#pic5" class="right">
             <img class="right" src="images/pic5.jpg">
         </a>
     </li>
     <li id="pic5"><img class="Picture" src="images/pic5.jpg" alt="图片5"/>
         <a  href="#pic4" class="left">
             <img class="right" src="images/pic4.jpg">
         </a>
         <a  href="#pic6" class="right">
             <img class="right" src="images/pic6.jpg">
         </a>
     </li>
     <li id="pic6"><img class="Picture" src="images/pic6.jpg" alt="图片6"/>
         <a  href="#pic5" class="left">
             <img class="right" src="images/pic5.jpg">
         </a>
         <a  href="#pic7" class="right">
             <img class="right" src="images/pic7.jpg">
         </a>
     </li>
     <li id="pic7"><img class="Picture" src="images/pic7.jpg" alt="图片7"/>
         <a  href="#pic6" class="left">
             <img class="right" src="images/pic6.jpg">
         </a>
         <a  href="#pic8" class="right">
             <img class="right" src="images/pic8.jpg">
         </a>
     </li>
     <li  id="pic8"><img class="Picture" src="images/pic8.jpg" alt="图片8"/>
         <a  href="#pic7" class="left">
             <img class="right" src="images/pic7.jpg">
         </a>
         <a  href="#pic9" class="right">
             <img class="right" src="images/pic9.jpg">
         </a>
     </li>
     <li  id="pic9"><img class="Picture" src="images/pic9.jpg" alt="图片9"/>
         <a href="#pic8" class="left">
             <img src="images/pic8.jpg"/>
         </a>
         <a  href="#pic1" class="right">
             <img class="right" src="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

时间: 2024-10-03 23:53:37

a标签做锚点 图片切换的相关文章

用纯CSS做的图片切换

前段时间做了一个用css做的图片切换.  我们先来看下html结构: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </he

教你做炫酷的碎片式图片切换 (canvas)

前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现,无奈功力不够只能放弃,最终选择用 canvas 来完成了. 准备工作 1. 首先准备相同尺寸的图片若干张,本例中图片尺寸均为 1920 * 1080(注意:这里的尺寸是原始图片的尺寸,不是通过 css 显示在页面上的尺寸).为方便之后

Html标签之frameset&amp;图片切换

今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标签不能放置在body标签之中,它的具体实现如下: 工程项目结构: 主页面代码(index.jsp): <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

css图片切换效果分析+翻译整理

Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后让动画起效. 今天我们将向您展示如何创建仅适用于CSS一些巧妙的滑动图像面板.该想法是使用背景图像的面板和一个标签上点击时动画

Jquery实现图片切换效果(IE,FF,Goole)都可以正常运行

这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) 1 <style type="text/css"> 2 3 /*展示图片切换的div样式*/ 4 #ShowImg { 5 width: 599px; 6 height: 324px; 7 background-image: url("imgs/1.jpg");/*注意自己的图片路径和图片名称*/ 8 margin: 0 auto; 9 } 10 /*显示点击切换按钮的div*

网站——循环图片切换效果(最近做网站,已经快炸了)

看一下效果 <!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" lang="zh-cn"><head><meta

用angularjs做简单的tab切换

用angularjs做简单的tab切换: 页面部分 <div> <div id="tabs" ng-controller="TabsCtrl"> <ul> <li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)">{{tab.t

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要边框,如果用自定义图片做按钮背景可以设为 false. 2 1.3. 异形按钮 2 1.4. 不绘制焦点 2 1.5. 鼠标经过时的图标 2 1.6. 选中时的图标 2 1.7. 禁用时显示的图标 2 1.8. 可能需要按钮半透明效果 2 2. 图片按钮的实现 2 2.1. 优先模式:button控