完全利用CSS实现图片切换特效_网页代码站(www.webdm.cn)

您的当前位置：网页代码站 >> 图片特效 >> 完全利用CSS实现图片切换特效

完全利用CSS实现图片切换特效

分类：图片特效时间：2009-09-09 点击：

关键词：CSS|图片切换|

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>完全利用CSS实现图片切换特效_网页代码站(www.webdm.cn)</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
  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}
</style>
</head>
  <body>
    <dl><dt><a href="#a" title="">1</a>
            <a href="#b" title="">2</a>
            <a href="#c" title="">3</a>
        </dt>
    <dd><img src="http://www.webdm.cn/images/20090909/p1.gif" alt="" id="a" />
        <img src="http://www.webdm.cn/images/20090909/p2.gif" alt="" id="b" />
        <img src="http://www.webdm.cn/images/20090909/p3.gif" alt="" id="c" />
    </dd>
  </dl>
</body>
</html>

运行代码全选代码复制代码保存代码友情提示

用纯CSS代码实现的首页图片切换特效，没有用到任何JavaScript代码，鼠标点击就会切换图片，看上去还行，代码非常少，也很实用。

一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。
运行代码方式：
1、点击“复制”按钮；
2、在桌面建立一个txt文档；
3、粘贴复制的代码；
4、最后把txt的扩展名改为“htm”或“html”；
5、完成，打开即可看到效果。

二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！

三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！

四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！

来顶一下

上一篇：CSS强制让FF浏览器显示滚动条
下一篇：JavaScript让多个图片广告交替显示