基于JQuery的图片显示效果

基于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="">
          </a>
        </li>
        <li>
          <a href="photos/image2.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image2.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image3.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image3.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image4.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image4.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image5.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image5.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image6.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image6.jpg" alt="">
          </a>
        </li>
        <li>
          <a href="photos/image7.jpg" title="$('#gallery a').largePhotoBox();">
            <img src="photos/thumb_image7.jpg" alt="">
          </a>
        </li>
      </ul>
    </div>
  </body>
</html>

基于JQuery的图片显示效果

相关推荐