用CSS制作一个圆形放大镜
发布人:一全科技 来源:EtherDream の 原创空间 发布于:2011-03-04 22:06:21 浏览:871

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

先说IE,因为IE有滤镜,可以实现许多意想不到的功能。先来整理下我们的目标:

1.放大一副图片

2.只显示其中的一个圆

3.圆外是透明的

图片的缩放可以通过img元素的拉伸来实现。接着盖上一张透明像素画的实心圆,因此正好只显示出放大后中心圆圈部分。但第3步可就不对了,虽然之前加盖了一张透明圆形的gif图片,屏幕上确实出现了一个放大过的圆形图片,但圆圈的外面却变成加盖图片的背景色了,因为这张图片是在最上层了。到此你或许在想给其中某些元素加些透明度什么的,事实上无论给哪个层加透明度都是徒劳的。因为此时无非就两种情况:圆圈外被背景色覆盖;背景色透明的话就是一个矩形的放大,而不是圆形。我们所希望的是:蒙版的背景色透明,并且在此位置下面的放大图也跟着透明。

对于IE来说,这并非难事,因为IE有滤镜。如果你熟悉的话应该早就想到了Chroma滤镜,这是一个很重要的滤镜,因为他能把一个层里的指定颜色变成透明色!这不正是我们期待吗。我们新建一个层,层里面分别叠上放大图片(后)和蒙版图片(前),就是为了让他们合并到这个新建层里。我们给这个新建层设置Chroma滤镜,因为他们的子层都在此合并像素了,所以圆圈外那部分背景色透明后,取而代之的就是原图片。这就是我们最终想要的效果。

值得注意的是,Chroma滤镜在给指定的蒙版背景色透明的时候,圆圈里同样的颜色也会一起透明掉,所以要给蒙版设置一个非常少见的背景色,尽可能减少圆圈里的透明像素点。

IE上面的解决方案还算简单,非IE的呢?你当然会说canvas,因为图形方面他是万能的。如果CSS上确实找不到办法,我们也只能用canvas。不过可别忘了那些非IE的主流浏览器几乎都是支持CSS3的。CSS3虽然没有像Chroma滤镜那样的效果,但是对于本例这样的效果还是绰绰有余的:因为我们只想要一个放大了的圆形图片,而CSS3天生就支持画圆。

CSS3支持层的圆角,例如border-radius:5px,就能给层的4个方角变为半径5px的圆角。我们不妨将其运用到极限,给一个100*100的层设置一个border-radius:50px圆角,这时可就是一个圆滚滚的层了!层里面的内容当然不会限制在圆角里面,但层的背景图片会。并且CSS3是支持背景图片缩放的,本例到此也就迎刃而解了。

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

Demo://www.etherdream.com/funnyscript/zoom/Demo.html

当然,如果再改进的话我们还可以用png图片作为蒙版,带上一些渐变的透明度,就更像玻璃的材质了。(2010/12/20)

  • 为什么说一直辛苦劳作的农民没有富起来?而不说一直勤劳的农民没有富起来? 2019-06-15
  • 刘红:关注乳腺健康 做好体检预防工作 2019-06-11
  • 中国伊斯兰教协会“四进”清真寺活动启动 2019-06-05
  • 我国社会组织正成为全球治理体系中的新生力量 2019-06-05
  • 林肯全新Navigator领航员正式上市 售112.80万元起 2019-05-27
  • “川商走进新经济”第一场活动落幕 2019-05-14
  • 还加上制裁伊朗引起价格飙升的石油战 2019-05-14
  • 青海:52个客运站卫生间将全面改造 2019-05-12
  • 依规治党和依法治国结合的典范 2019-05-12
  • 内蒙古水利厅厅长付万惠接受纪律审查和监察调查 2019-05-11
  • 传销就是利用这种劣根性。 2019-05-08
  • 女性之声——全国妇联 2019-04-22
  • 不忘初心继续前进——七集政论专题片 2019-04-21
  • 百姓故事:摔跤吧!女孩 2019-04-16
  • 一条塔里木河 串起南疆各色景致与无限风光 2019-04-16
  • 237| 454| 135| 809| 267| 510| 994| 52| 191| 627|