1

我试图在鼠标悬停时显示一个像圆圈一样的镜头。我为它做了一些编码，但仍然没有达到完美的结果。任何人有任何想法如何做到这一点然后让我知道？这是我的代码//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;
}

这是我的小提琴代码

4

3 回答 3

4

您必须用渐变或图像覆盖它。请参阅此小提琴以获取工作示例：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;
}

您会注意到，我还更改了边框并添加了阴影，以获得效果。

于 2013-09-30T14:20:52.913 回答
3

要实现“放大镜”效果，您可以遵循这两个 codepen 之一。

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

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

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

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

效果仅使用 box-shadow 完成。

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);
于 2013-09-30T14:28:20.480 回答
2

肯定的事。一年前我做过类似的事情。老实说，我真的很享受这个过程。由于我处理从边缘获取数据的方式，处理图像边缘的方式仍然存在问题。画布元素在不同的浏览器中实现不同，并给出不同的结果。客户不想要这种解决方案，所以开发停止了。

在此处输入图像描述

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

您可以通过复制文本来提取 svg 资源

var svgBase64Str = xxxxxxxxxxxxxx

并使用在线工具对其进行解码。我也遵循在那里创建它的教程的注释。

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

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

在此处输入图像描述

你可以在这里找到代码：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/

于 2013-09-30T14:41:39.020 回答