一个CSS图片切换效果代码
作者：5key 来源：5key.net 时间：2008-02-12 12:17:00
昨天群里介绍了一个专门帮你PS图片的网站。吐司网。
网站在图片的预览处理上有点意思。当鼠标经过图片，显示为处理过的图片。这样大家能很清晰的对比ps前后的区别。不过我更敢兴趣的是怎么实现的。
切换图片效果是如何实现的：
其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。
这样做好不好：
图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。
大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。
我的做法：
<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,图片
0
投稿猜你喜欢
MySQL中两种快速创建空表的方式的区别
2008-12-17 14:34:00
javascript+css图片切换效果
2007-08-04 20:00:00
两种与SQL Server数据库交换数据的方法
2008-12-10 15:39:00
打败 IE 的葵花宝典：CSS Bug Table
2010-08-03 12:30:00
实例简析XPath串函数和XSLT
2008-09-04 14:16:00
Oracle与MySQL删除字段时对索引和约束的处理
2008-12-26 16:41:00
asp 使用正则表达式替换word中的标签，转为纯文本
2011-02-28 10:49:00
LZ77 算法的JS实现
2010-04-11 22:32:00
关于MySQL编码问题的经验总结
2007-08-23 16:10:00
ASP用户登录模块的设计源码
2008-10-03 12:16:00
天极网页版式设计的思考
2008-01-18 12:44:00
javascript 获取硬盘信息代码
2007-12-08 21:27:00
DW自带的行为制作弹出菜单
2008-05-16 11:38:00
firebug1.7调试实用技巧指南
2011-06-27 20:17:22
sqlserver中根据字符分割字符串的最好的写法分享
2012-06-06 19:44:40
如何把ASP源代码编写成DLL组件
2007-10-19 13:49:00
带你深入了解SQL Server 2008的独到之处
2009-01-07 14:20:00
SQL数据库操作类
2009-01-14 16:26:00
Web标准下该如何“插入”图像
2008-03-17 13:01:00
[翻译]标记语言和样式手册 Chapter 14 图片替换
2008-02-18 12:56:00
