JSは、マウスをサムネイルに移動して大きな画像を表示する画像拡大効果を実現します_画像特殊効果

Web ページで使用される画像プロンプト効果。画像のサムネイルにマウスを移動すると、画像が大きく表示されます。これを実現する方法は数多くあります。 CSS を使用する人もいれば、jQuery を使用する人もいます。つまり、使い慣れた方法を選択するのが最善です。

<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="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 すべて選択 注:

外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]