js模拟真实翻页的照片展示效果，超酷~

查看效果

源码下载

前台部分代码

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"  lang ="en" >
   < head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8" />
    
     < title > Demo for - 'Create a unique Gallery by using z-index and jQuery' </ title >
    
     < link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="css/reset.css"   />
     < link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="css/960.css"   />
     < link  rel ="stylesheet"  type ="text/css"  media ="screen"  href ="css/main.css"   />
    
     < script  type ="text/javascript"  src ="js/jquery-1.3.2.min.js" ></ script >
     < script  type ="text/javascript"  src ="js/demo.js" ></ script >
   </ head >
  
   < body >
     < div  class ="container_12"  id ="wrapper" >
       < div  class ="grid_8"  id ="content" >< br  />< br  />< br  />< br  />< br  />< br  />< br  />
       
         <!--  relevant for the tutorial - start  -->
         < div  class ="grid_6 prefix_1 suffix_1"  id ="gallery" >
           < div  id ="pictures" >
             < img  src ="images/picture1.png"  alt =""   />
             < img  src ="images/picture2.png"  alt =""   />
             < img  src ="images/picture3.png"  alt =""   />
             < img  src ="images/picture4.png"  alt =""   />
             < img  src ="images/picture5.png"  alt =""   />
           </ div >
          
           < div  class ="grid_3 alpha"  id ="prev" >
             < a  href ="#previous" > &laquo;  Previous Picture </ a >
           </ div >
           < div  class ="grid_3 omega"  id ="next" >
             < a  href ="#next" > Next Picture  &raquo; </ a >
           </ div >
         </ div >
         <!--  relevant for the tutorial - end  -->

        
         < div  class ="clear" ></ div >
< p >< p > 可以上翻和下翻，模拟真实翻页的照片展示效果。 </ p ></ p >
< p ></ p >
       
       </ div >
      
     
       < div  class ="clear" ></ div >
     </ div >
   </ body >
</ html >

 

 

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/14/1758074.html