快捷導(dǎo)航

JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果

更新時(shí)間：2012年12月11日 12:10:24 作者：

一個(gè)網(wǎng)頁(yè)上用的圖片提示效果，當(dāng)把鼠標(biāo)移動(dòng)到圖片縮略圖的時(shí)候，會(huì)顯示圖片大圖，似乎在網(wǎng)上這是個(gè)很常見(jiàn)的效果，實(shí)現(xiàn)方法也比較多，有人用CSS，有人用JavaScript，有人用jQuery，總之，選擇自己習(xí)慣的方式去實(shí)現(xiàn)，就是最棒的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <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>  </head> <body> <h3>效果</h3> <ul> <li><a class="tooltip" title="蘋果 iPod" href="http://img.jbzj.com/file_images/article/201212/picmove_2/wall1.jpg"><img src="http://img.jbzj.com/file_images/article/201212/picmove_2/wall_s1.jpg" alt="蘋果 iPod"></a></li> <li><a class="tooltip" title="蘋果 iPod nano" href="http://img.jbzj.com/file_images/article/201212/picmove_2/wall2.jpg"><img src="http://img.jbzj.com/file_images/article/201212/picmove_2/wall_s2.jpg" alt="蘋果 iPod nano"></a></li> <li><a class="tooltip" title="蘋果 iPone" href="http://img.jbzj.com/file_images/article/201212/picmove_2/wall3.jpg"><img src="http://img.jbzj.com/file_images/article/201212/picmove_2/wall_s3.jpg" alt="蘋果 iPone"></a></li> <li><a class="tooltip" title="蘋果 Mac" ><img src="http://img.jbzj.com/file_images/article/201212/picmove_2/wall_s4.jpg" alt="蘋果 Mac"></a></li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: