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>
<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>
