jQuery+css3宝丽莱相片查看效果

2009-10-20 08:54:13 | 【

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>



图片集脚本代码请下载压缩包!

下载"jQuery+css3宝丽莱相片查看效果"

  • 本地下载
  • 本地下载2

相关资源