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

2024-07-11 08:29:23

字体：大中小

来源：转载

供稿：网友

图片放大，这是一个比较容易的效果了。当然，今天说的可不是简简单单的在一个框里放大，而是一个圆。就像放大镜或是狙击镜那样，只有圆圈里的放大，圈外的当然还是原来的图片。这是不是很不可思议？当然不是。做过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.Vevb.com/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.Vevb.com/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="https://files.Vevb.com/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>

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

上一篇：CSS样式权重的级联cascade的概念深入理解

下一篇：IE对标准的支持不够好导致CSS渲染跟其它浏览器有什么不同