玩票儿 · 走神儿

开学了，工作是忙碌的，身心是劳累的，但生活是充实快乐的－－因为学习到了新知识并应用于实践，很有成就感。

近来的活儿主要是一部分网页内容的筛选、组织、编辑和页面制作，其中图片展示不在少数。就观察而言，HTML的CSS革命正如卷狂潮般袭来，令人不可抗拒，因此使用CSS控制页面样式势成必然，如何才能在W3C框架下做出漂亮、简洁的效果？如何才能让数量有限的插图和装饰图片印上个人独特的风格烙印？最好的方法就是用CSS配合JS来完成。

以下是本人搜集的一些CSS和JS实现的效果，着力推荐，以供分享哟～

1.图片半透明效果

实现图片默认显示是半透明的效果，鼠标移上去时透明度变为100%。

这种方法比较简单。只是在IE中需要通过"filter"来定义透明度"opacity"，而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果在两种浏览器中都得到支持，需要把两种设定都加进去。
针对IE的设定：this.filters.alpha.opacity=50　
针对Mozilla的设定：this.style.MozOpacity=0.5

2.图片背景产生阴影效果

可以直接截取阴影部分的条状渐变的图片作为背景，也可以为图片加上filter属性。样例代码如下：

3.鼠标移到图片上，图片在旁边放大显示

有点像某些相册的功能，移动鼠标到感兴趣的缩略图上，旁边的位置（可以自己设定）出现未缩放的原图。只需要一张原大小的图片即可，缩略图是属性中设置的大小（offsetX、offsetY是原图出现位置相对缩略图片左上角的位置）。代码如下：

4.文字/图片的无缝滚动

有点类似于marquee的功能，是用JS程序控制的。

5.图片逐渐缩小直到消失

可以用来做浮动的宣传窗口吧，最后查无所踪，让痛恨此类窗口的人，哭笑不得？呵呵

6.鼠标放到链接上立即出现提示

HTML的ALT属性也可以实现提示功能，不过似乎有0.7秒的滞留时间。不怕麻烦的同学可以试试加JS代码来实现。

7.屏蔽转向链接的地址

有些不想为人所知的链接的“隐身法”。

希望这些小程序对大家有用。此外，对CSS感兴趣的，可以看看有人搜集的CSS技巧大放送，简明 HTML CSS 开发规范等，很有帮助。