Question

我试图在鼠标悬停时显示像圈子一样的镜头。我做了一些编码，但仍未达到完美的结果。任何人都知道如何做到这一点然后告诉我？这是我的代码 // HTML

<div class="thumbnails">
    <div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
<div class="thumbnail">
    <img src="http://www.niams.nih.gov/health_info/Sprains_Strains/images/Fig3_Thumb.gif" />
</div>
</div>

//的CSS

.thumbnails {
    padding: 35px;
}
.thumbnail {
    float:left;
    position:relative;
    width: 70px;
    margin-right: 10px;
}
.thumbnail img{
    /* ... */
    width:70px;
    height:50px;
}    

.thumbnail:hover img {
    position:relative;
    top:-25px;
    left:-35px;
    width:140px;
    height:140px;
    display:block;
    z-index:999;
    border-radius:75px;
    border:5px solid gray;
}

这是我的Fiddle Code

Answer 1

您必须使用渐变或图像覆盖它。请参阅此小提琴，了解一个工作示例：http://jsfiddle.net/V4YaQ/119/

基本上我将图像包裹起来并添加了叠加层：

<div class="thumbnail">
   <div class="image-container">
      <div class="overlay">&nbsp;</div>
      <img src="http://cdn1.bigcommerce.com/server4800/10d13/products/1134/images/4290/pw72_1__15735.1346792984.320.320.jpg" />
   </div>          
</div>

然后在CSS上我这样做了：

.thumbnail:hover .image-container {
  position:relative;    
  top:-25px;
  left:-35px;
  width:140px;
  height:140px;    
  z-index:999;    
  border-radius:75px;
  border:1px solid white;  
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail:hover img {
  position:relative;
  width:140px;
  height:140px;
  display:block;
}

.thumbnail .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(at 25% 25%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.0) 35%, rgba(0, 0, 0, 0.5) 100%);
  display: none;
}

.thumbnail:hover .overlay {
  display: block;  
  z-index: 1000;
}

正如您将注意到的那样，我还更改了边框并为效果添加了阴影。

Answer 2

要实现“放大玻璃”效果，您可以按照这两个代码之一进行操作。

http://codepen.io/bekerov/pen/kgyvL

http://codepen.io/TheHeat/pen/gdxFG

或者，如果你不想要鼠标效果，这里是你的“玻璃”效果的小提琴。

http://jsfiddle.net/V4YaQ/121/

效果仅使用框阴影。

box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

Answer 3

当然可以。一年前我做过这样的事。说实话，我真的很喜欢这个过程。由于我处理从边缘获取数据的方式，处理图像边缘的方式仍然存在问题。 canvas元素在不同的浏览器中实现不同，并给出不同的结果。客户不想要这种解决方案，所以开发停止了。

enter image description here

这里有一个现场演示：http://jsfiddle.net/enhzflep/xsEVb/

您可以通过复制

中的文本来提取svg资源

var svgBase64Str = xxxxxxxxxxxxxx

并使用在线工具取消编码。我在其中创建它的教程也有注释。

更新编辑： 我记得几年前我看到一些代码可以模拟漂浮在纹理上方的放大镜。关键的区别在于磁玻璃是弯曲的，因此在其表面上具有不同程度的图像位移。第一张图像只显示恒定的放大水平 - 平行线保持平行。

我前几天刚发现了一些代码，以获得更真实的镜头效果。它仍然不理想，因为它假设玻璃球与观察平面相交 - 不完全是一个精确的物理模型。修改用于计算每个像素的位移的等式并不难。这对我来说看起来很有效 - 即使在使用两个变量 - lens_mag和lens_width时确实需要一些额外的思考。

enter image description here

您可以在此处找到代码：http://jsfiddle.net/enhzflep/Ytq2M/

它来自此档案中的LENS代码的端口：http://internode.dl.sourceforge.net/project/demo-effects/The_Demo_Effects_Collection/0.7.2/The_Demo_Effects_Collection-0.7.2.tar.gz

我通过此页面找到了：http://demo-effects.sourceforge.net/

如何在鼠标悬停时绘制像圆圈一样的镜头

3 个答案: