Polaroid Photo Viewer with jQuery and CSS3 这是一个基于CSS3与jQuery开发的照片查看工具,你可以随着拖动照片。
查看演示页面 View Demo 查看全部代码 View Code
在网页<head>区添加以下代码
<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>
在网页<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>
图片集脚本代码请下载压缩包!




