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

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

效果演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS放大将效果</title>
<style>
html, body {
border: none;
overflow: hidden;
}
body {
background: url(../../images/201201/2012_01_08_01.jpg);
cursor: crosshair;
}
#divBox {
position: absolute;
}
#divBox * {
position: absolute;
}
#divMask {
width: 160px;
height: 160px;
border-radius: 80px;
background: #000 url(../../images/201201/2012_01_08_01.jpg) no-repeat;
}
#divZoom {
width: 100px;
left: 60px;
top: 135px;
font-size: 9px;
font-family: "Times New Roman";
-webkit-text-size-adjust: none;
color: #FFF;
}
</style>
</head>

<body ondragstart="return false">
<div id="divBox" style="left: 720px; top: 218px; ">
<div id="divMask" style="background-size: 2560px 1600px; background-position: -1520px -516px; "></div>
<img src="../../images/201201/Box.gif">
<div id="divZoom">ZOOM 2.0</div>
</div>
<script>
function $(v){return document.getElementById(v)}

var styBox = $("divBox").style;
var styMask = $("divMask").style;

var RATE_MIN = 1.5;
var RATE_MAX = 4;
var RATE_INC = 0.1;

var IMG_W = 1280;
var IMG_H = 800;

var ZoomRate = 2;
ImgZoom();

function ImgZoom()
{
var width = Math.round(IMG_W * ZoomRate);
var height = Math.round(IMG_H * ZoomRate);

styMask.backgroundSize = width + "px " + height + "px";
$("divZoom").innerHTML = "ZOOM " + ZoomRate.toFixed(1);
}

function ImgMove(x,y)
{
var left = Math.round(-ZoomRate * x + 80);
var top = Math.round(-ZoomRate * y + 80);

styMask.backgroundPosition = left + "px " + top + "px";
}

document.onmousedown = function()
{
event.preventDefault();
}

document.onmousemove = function()
{
styBox.pixelLeft = event.x - 80;
styBox.pixelTop = event.y - 80;

ImgMove(event.x, event.y);
}

document.onmousewheel = function()
{
ZoomRate += (event.wheelDelta>0?RATE_INC:-RATE_INC);

if(ZoomRate < RATE_MIN)
ZoomRate = RATE_MIN;
else if(ZoomRate > RATE_MAX)
ZoomRate = RATE_MAX;

ImgZoom();
ImgMove(event.x, event.y);
}
</script>
</body>
</html>

  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页面能够自动转跳。

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

CSS实现放大镜/狙击镜效果的更多相关文章

  1. 你想不到的！CSS 实现的各种球体效果【附在线演示】

    CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...

  2. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  3. Codrops 优秀教程：CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  4. xcode设置项目图标玻璃镜效果

    xcode5中设置 ios6和ios7的适配一些小细节注意,ios6中图标会默认的设置玻璃镜效果 找到图片文件夹APPlcon中右侧设置中的有个iOS icon is pre-rend-rendere ...

  5. CSS发光边框文本框效果

    7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...

  6. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  7. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  8. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  9. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

随机推荐

  1. JS - CommonJS、AMD、CMD

    CommonJS CommonJS是一种JS模块定义规范,它出现之初是为了解决JS天生没有模块管理的缺陷,它的终极目标是提供一个类似Python.Ruby和Java标准库.NodeJS的模块系统就是参 ...

  2. Fiddler(一)

    Fiddler:学习scrapy,不只是满足于网页上爬去信息的成功乐趣,现在开始接触爬去手机信息了,不好解决,知道过程不会轻松,但自己想去尝试.QAQ 写这篇博客是基于以下的几位大神学习笔记,我只是做 ...

  3. 学习python第十四天，模块

    Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python 代码段. 把相关的代码 ...

  4. [Bzoj2282]消防（二分答案+树的直径）

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  5. zeppelin的安装与使用

    想起马上就能回家了,心情是按捺不住的激动,唉,还是继续努力吧,其实不希望那么快就回家,感觉回去了就意味着马上就要回来了,人真的是神奇呀 今天我们来使用zeppelin,这个就是可以把我们查找的数据可以 ...

  6. 3687: 简单题（bitset）

    3687: 简单题 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 700  Solved: 319[Submit][Status][Discuss] ...

  7. Spring 各种注解备注

    Spring 各种注解备注 felix_feng 关注 2016.12.28 10:34* 字数 2092 阅读 790评论 0喜欢 6 转载 (http://blog.csdn.net/sudilu ...

  8. 剑指Offer - 九度1506 - 求1+2+3+...+n

    剑指Offer - 九度1506 - 求1+2+3+...+n2013-11-29 19:22 题目描述: 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switc ...

  9. 23、php知识点总结基础教程--part-1

    1.基本语法 PHP 脚本可放置于文档中的任何位置. PHP 脚本以 <?php 开头,以 ?> 结尾 <?php // 此处是 PHP 代码 ?> PHP 文件的默认文件扩展 ...

  10. MySQL事物相关学习

    总结下最近对MySQL数据库的认识 Q:在手动开启事物后,commit失败是否需要显示的rollback? A:在网上查了不少资料,没有查到明确的答案.问了身边的朋友,朋友也不太了解,不过均表示显示的 ...