懂网站设计的帮手看看，这个网格和鼠标效果如何实现的。

gmyu

http://www.gajah.com.sg/productpage/products.html

从没接触过网页设计，想整个小页面在小组内使用，很喜欢这个页面效果，简洁，明了。只用office的frontpage能实现么？
1. 网格显示图片。
2. 鼠标进入区域时候有遮罩或者高亮效果。

本人懂些许VBS,望高手赐教。

takashiki

其实相当的简单，只要使用CSS就可以了。如果使用的是IE，那么需要使用Alpha滤镜，如果是其他浏览器，则需要CSS3支持。

我弄个代码给你，先是CSS，根据各种浏览器内核分别划分：

1. <style type="text/css">
   
2. a:hover img{
   
3.     filter: Alpha(Opacity=50);     //万恶的IE
   
4.     -moz-opacity:0.5;               //FireFox
   
5.     -o-opacity:0.5;                   //Opera
   
6.     -webkit-opacity:0.5;             //Safari、Chrome
   
7.     opacity:0.5;                       //按理说IE 9以上、FireFox、Opera、Safari、Chrome都应该支持，但是……
   
8. }
   
9. </style>

复制代码

然后就是调用了。先放链接，里面放个图片，你把鼠标移到这个图片上，就有效果了：

1. <a href="#"><img src="s.jpg"></a>

复制代码

aleyn

CSS+JS插件就可以轻松搞定了。

xiangxiadage

学习了
谢谢2楼的兄弟的分享

沧海清风

记事本写。。。

gmyu

takashiki 发表于 2013-2-21 20:08
其实相当的简单，只要使用CSS就可以了。如果使用的是IE，那么需要使用Alpha滤镜，如果是其他浏览器，则需要 ...

会者不难，难者不会，多谢老兄，多谢论坛！我试试先。