Life Note , Open It – Potato's blog

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.

The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page:

http://www.flickr.com/photos/arcticpuppy/

When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. We are using the jQuery 2D Transform plugin for the animated rotation. You can find the plugin here: http://plugins.jquery.com/project/2d-transform

When navigating through the full images, we will reveal the next or previous image by removing the current image box by box.

Have fun with the demo and download the ZIP to experiment with this cool effect!
The whole animation looks best in Google Chrome and Apple Safari.

演示地址：http://www.orzbook.com/demo/MergingImageBoxes/index.html

jquery京东产品内页多图展示代码，鼠标移到图片上有放大效果，方便查看产品细节，此代码适合网店产品展示，大图尺寸650×650，推荐下载！
如图：

演示地址：http://www.orzbook.com/demo/product-images/index.html

jQuery(expression, [context])

概述

参数

<p>one</p> <div><p>two</p></div> <p>three</p>

$("div > p");

[ <p>two</p> ]

$("input:radio", document.forms[0]);

$("div", xml.responseXML);

实例地址：http://www.orzbook.com/demo/alert-area/alert_area.html

如图：

需要源码的可以发邮件给我

email:support@orzbook.com

实例地址：http://www.orzbook.com/demo/googleimg/google.html

google首页图片导航。

需要源码的可以发邮件给我

email:support@orzbook.com