1、h jQueryCufon.replace(a, h1, h2, h3);Cufon(h1,h3,textShadow: 1px 1px #fff);*margin:0;padding:0;bodybackground:#fff;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: #fff;background:#f0f0f0 url(/images/greyscale_natural_grunge5.jpg) repeat top left;.contentwidth:750px;padding:20px 50px;m
2、argin:0 auto;position:relative;.portfoliowidth:500px;margin:0 auto;position:relative;.portfolio_itemposition:relative;margin:30px auto;.image_wrapwidth:500px;height:500px;display:table-cell;text-align:center;vertical-align:middle;position:relative;cursor:pointer;.image_wrap imgvertical-align:middle;
3、margin:0 auto;position:relative;-moz-box-shadow:1px 1px 7px #000;-webkit-box-shadow:1px 1px 7px #000;box-shadow:1px 1px 7px #000;.zoom_overlaywidth:400px;height:400px;margin:-200px 0px 0px -200px;background:transparent url(/images/overlay.png) repeat top left;position:absolute;top:50%;left:50%;displ
4、ay:none;opacity:0;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;cursor:pointer;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);.zoom_overlay imgdisplay:none;h1font-size:40px;word-spacing:10px;color:#333;h3margin-bottom:30px;font-size:18px;word-spacing:5px;color:#c1a
5、97e;span.referencefont-family:Arial;position:fixed;left:10px;bottom:10px;font-size:12px;span.reference acolor:#333;text-transform:uppercase;text-decoration:none;Annotation Overlay Effect with jQueryClick on the images to see the notes for each itemmback to the Codrops tutorial$(function() /main divv
6、ar $portfolio = $(#portfolio);/click event for the image : /show the overlay$portfolio.find(.image_wrap).bind(click,function()var $elem= $(this);var $image = $elem.find(img:first);$image.stop(true).animate(width :400px,height:400px,250);/the overlay is the next elementvar opacity = 1;if($.browser.ms
7、ie)opacity = 0.5$elem.next().stop(true).animate(width :500px,height :500px,marginTop :-250px,marginLeft:-250px,opacity :opacity,250,function()/fade in the annotations$(this).find(img).fadeIn();););/click event for the overlay :/show the image again and hide the overlay$portfolio.find(.zoom_overlay).
8、bind(click,function()var $elem= $(this);var $image = $elem.prev().find(img:first);/hide overlay$elem.find(img).hide().end().stop(true).animate(width :400px,height :400px,marginTop :-200px,marginLeft:-200px,opacity :0,125,function()/hide overlay$(this).hide(););/show image $image.stop(true).animate(width:500px,height:500px,250);););
