昨天群里介绍了一个专门帮你PS图片的网站。吐司网。 网站在图片的预览处理上有点意思。当鼠标经过图片，显示为处理过的图片。这样大家能很清晰的对比ps前后的区别。不过我更敢兴趣的是怎么实现的。 我的做法预览：http://5key.net/demo/image-mouseover 切换图片效果是如何实现的： 其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。 这样做好不好： 图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。 大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。 我的做法： 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; … Continue reading →