实现效果:
实现图片遮罩展示效果。
实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <script src="jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <title>Insert title here</title> </head> <script type="text/javascript"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });</script> <body> <a href="img/banner_02.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."> <img src="img/banner_02.jpg" width="60" height="60" alt="Red round shape" /> </a> <a href="img/banner_01.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."> <img src="img/banner_01.jpg" width="60" height="60" alt="Red round shape" /> </a> </body> </html>