用CSS制作一个圆形放大镜

网络整理 - 07-27

    话说图片放大,这是一个再容易不过的效果了。当然,今天说的可不是简简单单的在一个框里放大,而是一个圆。就像放大镜或是狙击镜那样,只有圆圈里的放大,圈外的当然还是原来的图片。这是不是很不可思议? 当然不是。做过Flash的也许会脱口而出:套个蒙版就是了。可惜CSS不是Flash,没有那一套。我们只有从CSS里面慢慢挖掘。

    先说IE,因为IE有滤镜,可以实现许多意想不到的功能。先来整理下我们的目标:
    1.放大一副图片
    2.只显示其中的一个圆
    3.圆外是透明的

    

    前面关键的问题都以解决,下面就实现一个狙击瞄准器的效果,并支持滚轮缩放。为了使代码更清晰,本例分别为IE,FF及其他浏览器做了3个版本,通过Demo页面能够自动转跳。