`
jsntghf
  • 浏览: 2533491 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

一个很简单的基于css的图片切换效果

CSSXHTMLHTMLCC++ 
阅读更多

一个基于css的图片切换效果，很简单，鼠标点击后可以显示当前图片。

 dl {
    position:absolute;
    width:240px;
    height:170px;
    border:10px solid #eee;
  }
  dd {
    margin:0;
    width:240px;
    height:170px;
    overflow:hidden;
  }
  img {
    border:1px solid black
  }
  dt {
    position:absolute;
    right:3px;
    top:50px;
  }
  a {
    display:block;
    margin:1px;
    width:20px;
    height:20px;
    text-align:center;
    font:700 12px/20px "宋体",sans-serif;
    color:#fff;
    text-decoration:none;
    background:#666;
    border:1px solid #fff;
    filter:alpha(opacity=40);
    opacity:.4;
  }
  a:hover {
    background:#000
  }

 

<!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">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/swap/stylesheets/swap.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <dl>
      <dt><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a></dt>
      <dd>
        <img src="/swap/images/1.jpg" id="a" />
        <img src="/swap/images/2.jpg" id="b" />
        <img src="/swap/images/3.jpg" id="c" />
      </dd>
    </dl>
  </body>
 </html>

 

分享到：
| Watir － Ruby的开源Web自动化测试框架
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css3切换效果

    综上所述，这个项目很可能是一个关于如何使用CSS3实现各种切换效果的实例或者教学资源，涵盖了从基本的伪类选择器到高级的动画技术，结合了jQuery库和UI组件来增强交互性。通过分析和学习这些文件，我们可以深入了解...

    基于html5和css3响应式全屏滚动页面切换效果

    本文将深入探讨如何利用HTML5和CSS3构建一个基于全屏滚动的响应式页面切换效果。 首先，HTML5是新一代的超文本标记语言，引入了许多新的元素和API，为开发者提供了更多构建网页结构和功能的选择。例如，`&lt;header&gt;`...

    css实现的图片自动切换

    总结，通过CSS和div的结合，我们可以创建出各种图片切换效果，无论是简单的背景图片轮播还是复杂的多图切换。结合JavaScript，还能实现更多交互功能，让网页更加生动有趣。在实际项目中，根据需求选择合适的方法，既...

    基于jquery的图片切换插件

    总结，基于jQuery的图片切换插件是前端开发中的一个常见组件，它结合了jQuery的便利性和JavaScript的灵活性，为网页带来生动的视觉效果。通过对HTML、CSS和JavaScript的熟练掌握，开发者可以轻松创建出符合自身需求...

    jquery图片切换效果

    jQuery，一个强大的JavaScript库，提供了丰富的功能来实现各种图片切换效果。本篇将深入探讨如何利用jQuery创建流行且酷炫的图片切换效果。 首先，jQuery的灵活性和易用性使其成为实现动态图片切换的理想工具。通过...

    一个基jQuery实现最简单的图片切换特效源码例子

    - 考虑响应式设计，使图片切换效果在不同设备上都能良好显示。 8. **实际应用** 这个简单的图片切换特效适用于许多场景，如网站的首页、产品展示页面、新闻滚动条等。通过结合其他jQuery插件，如Bootstrap的...

    easySlides 基于jquery的图片切换效果 v1.1.zip

    《基于jQuery的easySlides图片切换效果详解》 在网页设计中，动态的图片展示效果能够极大地提升用户体验，吸引用户注意力。今天我们将深入探讨一个名为"easySlides"的jQuery插件，它提供了简单而高效的图片切换功能...

    使用纯CSS3实现图片轮播效果源码免费下载

    【标题】中的“使用纯CSS3实现图片轮播效果源码免费下载”表明我们要讨论的是一个基于CSS3技术实现的图片轮播效果，且提供源码供用户免费下载。CSS3是层叠样式表的第三版，是Web设计领域的重要组成部分，它提供了...

    一个比较简单的图片切换，没有使用Flash.rar

    标题为“一个比较简单的图片切换，没有使用Flash.rar”的资源提供了一种实现图片切换效果的方法，它完全基于CSS和JavaScript技术，避免了对Adobe Flash的依赖。Flash曾经是创建动态内容的流行工具，但由于其不支持...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品大图展示 98. 很帅的jQuery鼠标移动预览图展示+简介内容展示特效代码 99. ...

    16种基于Bootstrap的css3图片hover效果

    7. 图片叠加层：Bootstrap中可以创建一个半透明的覆盖层，通过改变其背景颜色、透明度或添加渐变效果，在悬停时产生不同的视觉冲击力。 8. 内容揭示：在图片下方隐藏一些文字或按钮，当鼠标悬停时显示，可以用于...

    幻灯片图片切换效果

    在IT领域，幻灯片图片切换效果是一种常见的用户体验设计元素，尤其在网页设计和多媒体展示中广泛应用。这种效果使得多张图片能够以平滑、动态的方式进行过渡，为用户提供更吸引人的视觉体验。以下是关于“幻灯片图片...

    css3超酷tab选项卡式页面切换特效

    8. **JavaScript和jQuery的辅助**：尽管这个特效主要基于CSS3，但可能还涉及到JavaScript或jQuery来处理用户的交互事件，如点击选项卡时触发页面切换。jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理和...

    百度百家图片切换效果.zip

    【标题】"百度百家图片切换效果.zip"是一个包含HTML...对于初学者来说，这是一个很好的实践案例，可以帮助他们理解jQuery和网页动态效果的实现方式。而对于有经验的开发者，它也可以作为一个快速实现此类效果的模板。

    图片切换特效源码

    在图片切换特效中，Jquery通过其强大的DOM操作、事件绑定和动画API，使得实现复杂的图片切换效果变得简单易行。 源码包中的"nathansearles-loopedSlider-c417f79"可能是一个特定的图片切换插件或项目版本。这个...

    javascript(DOM)图片切换效果.zip

    总的来说，"javascript(DOM)图片切换效果.zip"中的内容应该是一个基于JavaScript和jQuery的图片轮播解决方案，包含代码、图片资源和使用指南。解压并按照使用须知进行操作，就能在网页上实现动态的图片切换效果。

    图片基本切换效果(纯必须代码附说明）

    常见的图片切换效果可能包括淡入淡出、滑动切换、缩放等，这些效果可以通过CSS3或JavaScript实现，而这里使用的是JavaScript（jQuery）。 压缩包内的文件名： 1. picturn.css：这是样式表文件，包含了控制图片布局...

    基于JQuery的幻灯片图片切换代码（CSS+JS）

    "基于JQuery的幻灯片图片切换代码（CSS+JS）"就是一个典型的实现方式，它结合了JavaScript库JQuery的力量以及CSS样式来创建出一种平滑、自动轮播的图片展示效果，常用于网站的首页或者产品展示区域。 JQuery是一个...

    jquery.slider滑动焦点图片切换插件支持百叶窗滤镜效果...

    标题中的“jquery.slider”指的是基于JavaScript库jQuery的一个滑动焦点图片切换插件。这个插件主要用于网站设计，为网页提供动态、吸引人的图像展示方式，通常用于产品展示、轮播图或者幻灯片效果。"百叶窗滤镜效果...

    基于JQuery横向切换效果

    综上所述，基于JQuery的Banner大图片横向切换效果涉及到的选择、操作、动画、事件处理和响应式设计等多个方面，是Web前端开发中一个典型的实践案例，有助于提升网页的互动性和美观度。通过学习和实践这个案例，...

Magicbox
Global site tag (gtag.js) - Google Analytics