点击图片显示透明灰色背景注释信.doc

h jQuery Cufon.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;margin: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;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%;display: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:#c1a97e;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 itemm back to the Codrops tutorial $(function() /main divvar $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.msie)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).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 ,