位置：首页>> 网络编程>> 网页设计>> 一个CSS图片切换效果代码

一个CSS图片切换效果代码

作者：5key　来源：5key.net　发布时间：2008-02-12 12:17:00　

标签：切换,css,图片

昨天群里介绍了一个专门帮你PS图片的网站。吐司网。

网站在图片的预览处理上有点意思。当鼠标经过图片，显示为处理过的图片。这样大家能很清晰的对比ps前后的区别。不过我更敢兴趣的是怎么实现的。

切换图片效果是如何实现的：

其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。

这样做好不好：

图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。

大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。

我的做法：

演示：image-mouseover.html

<style>
h2{font-size:14px; font-weight:bold; padding:10px 0; margin:5px 0; border-bottom:1px solid #ccc;}
.box2{}
.box2 img{display:block; padding:2px; border:0;}
.box2 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}
.box2 a span{display:none; color:#F00;}
.box2 a span h1{font-size:12px; position:absolute; bottom:0; background:#333; color:#FFF; font-weight:normal; text-align:center; width:128px;  padding:4px; display:block;
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.box2 a:hover{color:#999; border:2px solid  #333; }
.box2 a:hover span{display:inline; position:absolute;}

.box3{}
.box3 img{display:block; padding:2px; border:0;}
.box3 a{color:#333; text-decoration:none;border:2px solid #FFF; float:left; cursor:hand;}
.box3 a span{display:none; color:#F00;}
.box3 a span h1{font-size:12px; position:absolute; bottom:0; background:#333; color:#FFF; font-weight:normal; text-align:center; width:128px;  padding:4px; display:block;
filter:alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;
}
.box3 a:active{color:#999; border:2px solid  #333; }
.box3 a:active span{display:inline; position:absolute;}
</style>
</head>

<body>
<h2>CSS切换图片效果</h2>
<div class="box2">
<a href="#"><span><h1>未处理</h1><img src="1.jpg" /></span><img src="2.jpg" /></a>
</div>
<div class="box3">
<a href="#"><span><h1>未处理</h1><img src="1.jpg" /></span><img src="2.jpg" /></a>
</div>
</body>

投稿

一个CSS图片切换效果代码

猜你喜欢