如何在鼠標懸停上繪製圓形鏡頭

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/

基本上我包的形象和增加覆蓋：在CSS我這樣做

<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> 

然後：

.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元素在不同的瀏覽器中以不同的方式實現，並給出了不同的結果。客戶不想要這種解決方案，所以停止開發。

有一個現場演示在這裏：http://jsfiddle.net/enhzflep/xsEVb/

可以在

var svgBase64Str = xxxxxxxxxxxxxx 

提取SVG資源，通過複製文本，然後用一個在線工具unencoding它。我也在附帶的教程中記錄了它的創建。

更新編輯： 我記得那年前我看到一些代碼，可以模擬漂浮在紋理之上的放大鏡。關鍵的區別在於，磁性玻璃是彎曲的，因此在其表面上具有不同程度的圖像位移。第一張圖像只顯示恆定的放大倍數 - 平行線保持平行。

我剛剛發現了一些代碼，以獲得更真實的鏡頭效果。它仍然不是理想的，因爲它假設了一個與觀察平面相交的玻璃球體 - 並不完全是一個精確的物理模型。修改用於計算每個像素位移的公式並不難。這看起來並且對我來說工作得很好 - 即使在玩兩個變量 - 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/