基于JQuery的图片展示效果
这是一个 jQuery 插件，用一种很巧妙的方式显示大型图片，点击缩略图，大图很完美地适应浏览器窗口，用鼠标拖动，可以在大图的各个部分浏览。
?
<!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=iso-8859-1"> <title>Example</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.box-0.1.0.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.box-0.1.0.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { $('#gallery a').largePhotoBox(); }); </script> <style type="text/css"> body {margin:0} h2, p, #gallery {margin:15px} #gallery { background-color:#444; padding:10px; width:auto } #gallery ul {list-style:none} #gallery ul li {display:inline} #gallery ul img { border:5px solid #3E3E3E; border-width:5px } #gallery ul a {text-decoration:none} #gallery ul a:hover img { border:5px solid #FFF; border-width:5px; color:#FFF } #gallery ul a:hover {color:#FFF} </style> </head> <body> <div id="gallery"> <ul> <li> <a href="photos/image1.jpg" title="$('#gallery').largePhotoBox();"> <img src="photos/thumb_image1.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image2.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image2.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image3.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image3.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image4.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image4.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image5.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image5.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image6.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image6.jpg" alt="基于JQuery的图片显示效果"> </a> </li> <li> <a href="photos/image7.jpg" title="$('#gallery a').largePhotoBox();"> <img src="photos/thumb_image7.jpg" alt="基于JQuery的图片显示效果"> </a> </li> </ul> </div> </body></html>?