Как нарисовать объектив, как круг на мышином

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 реализуется по-разному в разных браузерах и дает другой результат. Клиент не хотел такого решения, поэтому разработка прекратилась.

Там в демо здесь: http://jsfiddle.net/enhzflep/xsEVb/

Вы можете извлечь ресурс SVG, путем копирования текста в

var svgBase64Str = xxxxxxxxxxxxxx 

и unencoding его с онлайновым инструментом. Есть заметки для учебника, который я использовал, чтобы создать его там.

UPDATE EDIT: я вспомнил, что несколько лет назад я видел некоторый код, который будет имитировать лупу плавающей над текстурой. Ключевое отличие состоит в том, что магнетон искривлен и, следовательно, имеет различную степень смещения изображения по его поверхности. На первом изображении показан только постоянный уровень увеличения - параллельные линии остаются параллельными.

На днях я только что нашел код для более достоверного эффекта линзы. Он по-прежнему не идеален, так как он предполагает стеклянную сферу, которая пересекается с плоскостью просмотра - не совсем точная физическая модель. Было бы не так сложно изменить уравнение, используемое для вычисления смещения для каждого пикселя. Это выглядит и работает достаточно хорошо для меня - даже если это требует дополнительного мышления при игре с двумя переменными - lens_mag и lens_width.

Вы можете найти код здесь: http://jsfiddle.net/enhzflep/Ytq2M/

Он пришел из порта кода ОБЪЕКТИВ, найденного в этом архиве: 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/