JS는 썸네일에 마우스를 이동하여 큰 그림을 표시하는 그림 확대 효과를 구현합니다._이미지 특수 효과

웹 페이지에서 사용되는 그림 프롬프트 효과입니다. 그림 썸네일에 마우스를 올리면 그림이 크게 표시됩니다. 인터넷에서 흔히 볼 수 있는 효과인 것 같습니다. CSS를 사용하는 사람도 있고, JavaScript를 사용하는 사람도 있습니다. 간단히 말해서, 익숙한 방식을 선택하는 것이 가장 좋습니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>사진 프롬프트 효과</title> <style type="text/css"> body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;} /*tooltip*/ #tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;} </style> <h3> </h3> <ul>효과<li> <a class="tooltip" title="苹果 iPod" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" class="lazy" alt="苹果 iPod"></a> </li> <li><a class="tooltip" title="苹果 iPod nano" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" class="lazy" alt="苹果 iPod nano"></a></li> <li><a class="tooltip" title="苹果 iPone" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" class="lazy" alt="苹果 iPone"></a></li> <li><a class="tooltip" title="苹果 Mac" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" class="lazy" alt="苹果 Mac"></a></li> </ul>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]