`
jsntghf
  • 浏览: 2482910 次
  • 性别: 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自动化测试框架
评论
发表评论

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

相关推荐

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

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

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...

    CSS3鼠标滑过图片3D翻转动画特效

    这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效。该特效基于Bootstrap网格系统来布局，通过简单的CSS3代码，在鼠标滑过图片时对图片进行3D翻转，效果非常的酷。

    100多个JQuery效果示例（实例）div+css+javascrpit

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

    简单易用的jQuery页面切换动画效果

    一组新老结合的代码实现的动画效果 为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的...

    简单易用的jQuery页面切换动画效果.zip

    一组新老结合的代码实现的动画效果 为什么说是新老结合呢，首先，页面是基于jQuery实现的插件 其次，展现的动画效果依赖于CSS3动画，so，新老结合实现的动画效果 使用方法： 1、将head中的CSS引入到你的网页中...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    77. 一款基于jquery定时图片切换代码下载 78. 一款实用经典jQuery图片切换展示插件下载 79. 下载jQuery动感广告图片翻转插件(PictureRoll)示例版 80. 下载JQuery淡入淡出效果插件InnerFade 81. 下载jquery走马灯...

    js带前后翻页的图片切换效果代码分享

    这是一款基于javascript带前后翻页的图片切换效果代码，实现过程很简单。 运行效果图： ——————-查看效果——————- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 在head区域引入CSS样式： ...

    CSS网站布局实录 （第二版）PDF版

    《CSS网站布局实录:基于Web标准的网站设计指南(第2版)》内容提要： 本书是一本讲述基于Web标准的应用CSS进行网站布局设计与...感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友

    基于jQuery和Bootstrap的手风琴垂直菜单

    之前我们分享过很多手风琴样式的jQuery插件和CSS3应用，同时也有手风琴式的菜单，比如CSS3垂直手风琴折叠菜单和CSS3手风琴下拉菜单 支持多菜单展开，另外也有手风琴式的图片切换，比如最近介绍的jQuery横向手风琴...

    简单的swiper图片轮播切换特效

    swiper基于css3属性制作带索引条进度缓冲的图片轮播展示，支持鼠标拖动图片切换效果。

    jquery 动态示例

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

    炫酷实用的HTML5应用和jQuery插件

    这是一款基于jQuery和CSS3的图片动画特效，该图片动画是洗牌的效果，我们只需点击切换按钮，即可一张张切换图片。另外，如果你长按住按钮不放，图片的洗牌效果就会更加明显和有趣，该jQuery图片特效一共有3中效果。 ...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Activity Activity是一个应用程序组件，提供一个屏幕，用户可以用来交互为了完成某项任务，是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架，是目前较流行的一种Web应用程序开源框架。...

    网优宝企业网站管理系统（基于seo技术一站式优化）

    网优宝(woyobo)seo企业网站管理系统采用asp.net(C#) + ACC2003构架，全站基于seo核心开发，使用div+css 2.0设计界面，全站使用伪静态设置。内置多个个性系统：企业简介系统（自由添加），新闻发布系统，产品发布系统...

    基于JavaScript实现仿京东图片轮播效果

    js实现仿京东图片轮播效果，当鼠标划在窗口上面停止计时器，鼠标离开窗口，开启计时器，鼠标划在页签上面，停止计时器，手动切换，通过定义计时器封装函数run，封装函数changeOption，实现此效果，代码简单易懂，...

    jQuery水平滑动焦点图插件

    今天介绍的这款jQuery焦点图插件的图片是水平滑动的，三张图片同时滑动有一种视差效果的感觉，并且焦点图也拥有左右切换箭头按钮，总体来讲非常华丽。 接下来我们来看看实现这款jQuery水平滑动焦点图的方法和源码...

    基于JavaScript实现焦点图轮播效果

    　焦点图的HTML结构很简单，就是一个父容器（id=box），包含三个子容器，分别存放图片（id=pics）、底部按钮（id=dots）、作用切换箭头（class=turn）。加上样式后就是下图二的布局。 二、表示层（CSS） 　页面的...

    Android UI组件实例集合

    为Android应用开发提供一个轻量级开发框架，让开发者可以基于HTML/CSS/JAVASCRIPT快速开发android应用界面，同时也能够利用mobilelite调用android后台的服务。 18、Android瀑布流实例 android_waterfall 实现了类似...

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