ZoomEffectjQueryPlugin.zip资源-CSDN文库

共16个文件

jpg：13个

js：2个

html：1个

165 浏览量 2023-11-09 09:17:34 上传评论收藏 1.5MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Zoom Effect jQuery Plugin.zip （16个子文件）

zoom

thumb

camaro3.jpg 2KB

camaro4.jpg 2KB

camaro2.jpg 2KB

camaro1.jpg 2KB

jquery-1.8.3.min.js 91KB

jquery.elevatezoom.js 57KB

screenshot.jpg 105KB

index.html 2KB

large

camaro3.jpg 675KB

camaro4.jpg 236KB

camaro2.jpg 325KB

camaro1.jpg 103KB

small

camaro3.jpg 44KB

camaro4.jpg 19KB

camaro2.jpg 42KB

camaro1.jpg 22KB

<!DOCTYPE html> <html> <head> <style type="text/css"> #container{ width:500px; padding:5px; border:1px solid #CCC; margin-left:auto; margin-right:auto; } #gallery_01{ width:430px; margin-top:10px; display:block; margin-left:auto; margin-right:auto; border:1px solid #CCC; } #gallery_01 img{ border:2px solid white; } .active img{ border:2px solid #333 !important; } </style> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.elevatezoom.js"></script> <script> $(document).ready(function(){ $("#zoom_03").elevateZoom({ gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, tint:true, tintColour:'#FF9999', tintOpacity:0.5, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif' }); $("#zoom_03").bind("click", function(e) { var ez = $('#zoom_03').data('elevateZoom'); $.fancybox(ez.getGalleryList()); return false; }); }); </script> <title>Zoom Effect</title> </head> <body> <div id="container"> <img id="zoom_03" src="small/camaro1.jpg" data-zoom-image="large/camaro1.jpg"/> <div id="gallery_01"> <a href="#" data-image="small/camaro1.jpg" data-zoom-image="large/camaro1.jpg"> <img id="zoom_03" src="thumb/camaro1.jpg" /> </a> <a href="#" data-image="small/camaro2.jpg" data-zoom-image="large/camaro2.jpg"> <img id="zoom_03" src="thumb/camaro2.jpg" /> </a> <a href="#" data-image="small/camaro3.jpg" data-zoom-image="large/camaro3.jpg"> <img id="zoom_03" src="thumb/camaro3.jpg" /> </a> <a href="#" data-image="small/camaro4.jpg" data-zoom-image="large/camaro4.jpg"> <img id="zoom_03" src="thumb/camaro4.jpg" /> </a> </div> </div> </body> </html>

评论收藏

内容反馈