This example uses the Jquery.imgbox.pack.js library. Look directly at the code:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <Metahttp-equiv= "Content-type"content= "text/html; charset=gb2312" />5 <Metaname= "keywords"content="" />6 <Metaname= "description"content="" />7 <title>3 kinds of jquery pop-up image effect</title>8 <Linkrel= "stylesheet"href= "Http://7u2iij.com1.z0.glb.clouddn.com/images_style.css" />9 <Scripttype= "Text/javascript"src= "Js/jquery.min.js"></Script>Ten <Scripttype= "Text/javascript"src= "Js/jquery.imgbox.pack.js"></Script> One <Scripttype= "Text/javascript"> A $ (document). Ready (function() { - $("#pic1"). Imgbox (); - the $("#pic2"). Imgbox ({ - 'zoomopacity' : true, - 'Alignment' : 'Center' - }); + - $("#pic3"). Imgbox ({ + 'Speedin' : 0, A 'Speedout' : 0, at 'Alignment' : 'Center', - 'Overlayshow' : true, - 'AllowMultiple' : false - }); - }); - </Script> in </Head> - <Body> to <!--Code BEGIN - + <DivID= "Content"> - <H1>imgbox--image Click to enlarge example</H1> the <HR/> * <DivID= "Images"> $ <aID= "Pic1"title= "Picture One"href= "Http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg"><imgalt=""src= "Http://7u2iij.com1.z0.glb.clouddn.com/pic1.jpg"width= "Max"Height= "All" /></a>Panax Notoginseng <aID= "Pic2"title= "Picture Two"href= "Http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg"/><imgalt=""src= "Http://7u2iij.com1.z0.glb.clouddn.com/pic2.jpg"width= "Max"Height= "All" /></a> - <aID= "PIC3"title= "Picture three"href= "Http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg"><imgalt=""src= "Http://7u2iij.com1.z0.glb.clouddn.com/pic3.jpg"width= "Max"Height= "All" /></a> the </Div> + <Div><ahref=""Target= "_blank"class= "Download">Local Downloads</a></Div> A </Div> the <!--Code END - + <Divstyle= "Text-align:center"> - <P>Article Source:<ahref= "http://www.cnblogs.com/iyitong/"Target= "_blank">CYT Static Wind</a></P> $ </Div> $ </Body> - </HTML>
Local Downloads
3 kinds of jquery pop-up image effect