CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

程序员文章站 2023-08-15 13:05:53

图片放大，这是一个比较容易的效果了。当然，今天说的可不是简简单单的在一个框里放大，而是一个圆,就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外的当然还是原来的图片,需要的朋... 12-12-10...

图片放大，这是一个比较容易的效果了。当然，今天说的可不是简简单单的在一个框里放大，而是一个圆。就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外的当然还是原来的图片。这是不是很不可思议？当然不是。做过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(//files.jb51.net/file_images/article/201212/201212101129555.jpg);
 cursor: crosshair;
}
#divbox {
 position: absolute;
}
#divbox * {
 position: absolute;
}
#divmask {
 width: 160px;
 height: 160px;
 border-radius: 80px;
 background: #000 url(//files.jb51.net/file_images/article/201212/201212101129555.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="//files.jb51.net/file_images/article/201212/201212101129556.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>

提示：您可以先修改部分代码再运行

放大一副图片

只显示其中的一个圆
圆外是透明的

图片的缩放可以通过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是支持背景图片缩放的，本例到此也就迎刃而解了。