一般用于产品详情展示，例如京东,易迅都是类似的效果
?css文件和js请到演示页面查看
演示
?
?
?
XML/HTML Code
- <div?class="zoom-wrapper">??
- <div?class="zoom-left">??
- <div?style="height:274px;width:411px;"?class="zoomWrapper"><img?style="border:?1px?solid?rgb(232,?232,?230);?position:?absolute;"?id="zoom_03"?src="images/image1.png"?data-zoom-image="images/image1.jpg"?width="411"></div>??
- ??
- <div?id="gallery_01"?style="width:500px;?padding-left:88px;">??
- ???
- <a?href="#"?class="elevatezoom-gallery?active"?data-update=""?data-image="images/image1.png"?data-zoom-image="images/image1.jpg">??
- <img?src="images/image1.png"?width="100"></a>??
- ??
- <a?href="#"?class="elevatezoom-gallery"?data-image="images/image2.png"?data-zoom-image="images/image2.jpg"><img?src="images/image2.png"?width="100"></a>??
- ??
- <a?href="http://www.elevateweb.co.uk/image-zoom/tester"?class="elevatezoom-gallery"?data-image="images/image3.png"?data-zoom-image="images/image3.jpg">??
- ?????<img?src="images/image3.png"?width="100">??
- </a>??
- ??
- <a?href="http://www.elevateweb.co.uk/image-zoom/tester"?class="elevatezoom-gallery"?data-image="images/image4.png"?data-zoom-image="images/image4.jpg"><img?src="images/image4.png"?width="100"></a>??
- ??????
- </div>??
- </div>??
- </div>??
JavaScript Code
- <script?type="text/javascript"??
- src="http://pagead2.googlesyndication.com/pagead/show_ads.js">??
- </script>??
- </div>??
- </div>??
- <script?type="text/javascript">??
- $(document).ready(function?()?{??
- $("#zoom_03").elevateZoom({gallery:'gallery_01',?cursor:?'pointer',?galleryActiveClass:?"active",?imageCrossfade:?true,?loadingIcon:?"images/spinner.gif"});???
- ??
- $("#zoom_03").bind("click",?function(e)?{????
- ??var?ez?=???$('#zoom_03').data('elevateZoom');??
- ??ez.closeAll();?//NEW:?This?function?force?hides?the?lens,?tint?and?window???
- ????$.fancybox(ez.getGalleryList());??
- ??return?false;??
- });???
- ??
- });???
- </script>??
?
原文地址:http://www.freejs.net/article_jquerytupiantexiao_94.html