jquery缩放图片_jQuery CSS缩放图像教程

jquery缩放图片

Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing. Features

今天，我将向您介绍JQuery的另一个有用工具-Zoomimage插件。 通过调整图像大小，可以达到不同的设计思路。 特征

• Preloads images
  预载图片
• The images can by grouped in galleries
  图像可以按画廊分组
• Scales the image to fit the viewport
  缩放图像以适合视口
• Keyboard gallery navigation
  键盘库导航

As example, we want to animate list of your members or your image gallery.

例如，我们要为您的成员列表或图库设置动画。

现场演示

HTML (The HTML)

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

这是所有5个样本的来源。 如您所见-我们有简单的无序列表，它们都非常相同，只是具有不同的'id'属性。

<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example1"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example1"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example2"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example2"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example2"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example2"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example2"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example3"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example3"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example3"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example3"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example3"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>

<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_de