jQuery+css3相片拖拽查看效果,超实用

查看效果

源码下载

 前台部分代码

代码

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html;charset=iso-8859-1" />
< title > Polaroid Photo Viewer with jQuery and CSS3 </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="css/style.css" />
< script  type ="text/javascript"  src ="http://www.google.com/jsapi" ></ script >
< script  type ="text/javascript"  src ="js/script.js" ></ script >
</ head >
< body >
< div  class ="polaroid" >
     < img  src ="images/01_colosseum.png"  alt ="Colloseum"   />
     < p > Coloseum in Rome </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/02_vatican.png"  alt ="Vatican"   />
     < p > Vatican </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/03_forum_romanum.png"  alt ="Forum Romanum"   />
     < p > Forum Romanum </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/04_fiat_500.png"  alt ="Fiat 500"   />
     < p > Fiat 500 - Typical Italian car </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/05_me_gf.png"  alt ="Me and my girl in Florance"   />
     < p > My girl and me in Florance </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/06_venetian_gondolas.png"  alt ="Venetian Gondolas"   />
     < p > Venetian Gondolas </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/07_pizza.png"  alt ="Pizza"   />
     < p > Delicious pizza -  < strong > the </ strong >  Italian food </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/08_pool.png"  alt ="Swimming pool"   />
     < p > Swimming pool near our house </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/09_florence.png"  alt ="Florence"   />
     < p > Bridge in Florence - Ponte Vecchio </ p >
</ div >
< div  class ="polaroid" >
     < img  src ="images/10_tower_of_pisa.png"  alt ="Tower of Pisa"   />
     < p > Leaning Tower of Pisa </ p >
</ div >

< p >< a  href ="http://www.jscss8.com/"  target ="_blank" > www.jscss8.com </ a ></ p >
</ body >
</ html >

 

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