JS realizes the picture magnification effect of moving the mouse to the thumbnail to display the large picture_Image special effects

A picture prompt effect used on a web page. When you move the mouse to the picture thumbnail, a large picture of the picture will be displayed. It seems to be a very common effect on the Internet. There are many ways to achieve it. Some people use CSS, and some use JavaScript. Some people use jQuery. In short, it is best to choose the way you are accustomed to.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Picture prompt effect</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>Effect<li> <a class="tooltip" title="苹果 iPod" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"> <img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" 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="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" 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="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" 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="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" alt="苹果 Mac"></a></li> </ul>
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]