jquery图片墙鼠标悬停文字滑出提示特效代码下载


jquery图片墙鼠标悬停文字滑出提示特效代码下载
jquery图片墙鼠标悬停文字滑出提示特效代码下载以及图片墙、鼠标悬停文字、滑出提示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.unveil.min.js"></script>

3. HTML代码

<div id="demo">
	<div class="col">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" alt="monaco see" />
				<span class="todos-thumb-span">monaco see</span>
			</p>
		</div>
	</div>
	<div class="col col1">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5913489167_1e78858455_s.gif" alt="the flower" />
				<span class="todos-thumb-span">the flower</span>
			</p>
		</div>
	</div>
	<div class="col col2">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5914033844_504a351fd4_m.gif" alt="Chapel Bridge">
				<span class="todos-thumb-span">Chapel Bridge</span>
			</p>
		</div>
	</div>
	<div class="col col3">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5914036076_e409dddb37_s.gif" alt="Luzern sky">
				<span class="todos-thumb-span">Luzern sky</span>
			</p>
		</div>
	</div>
	<div class="col col4">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5914055722_906169a54b_s.gif" alt="Luzern castle">
				<span class="todos-thumb-span">Luzern castle</span>
			</p>
		</div>
	</div>
	<div class="col col5">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5969337090_e040bb9ce2_m.gif" alt="Milano hotel's sunflower">
				<span class="todos-thumb-span">Milano hotel's sunflower</span>
			</p>
		</div>
	</div>
	<div class="col col6">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5908131051_25a8212125_m.gif" alt="i love salzburg">
				<span class="todos-thumb-span">i love salzburg</span>
			</p>
		</div>
	</div>
	<div class="col col7">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5908123183_76bb62439f_s.gif" alt="salzburg castle help">
				<span class="todos-thumb-span">salzburg castle</span>
			</p>
		</div>
	</div>
	<div class="col col8">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5883863501_052ebe2775_s.gif" alt="the berchtesgaden sky">
				<span class="todos-thumb-span">the berchtesgaden sky</span>
			</p>
		</div>
	</div>
	<div class="col col9">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884485140_194382f403_s.gif" alt="rose">
				<span class="todos-thumb-span">kingsee rose</span>
			</p>
		</div>
	</div>
	<div class="col line">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884419570_78ea1e933a_s.gif" alt="berchtesgaden lake">
				<span class="todos-thumb-span">berchtesgaden lake</span>
			</p>
		</div>
	</div>
	<div class="col line col1">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884628148_1d9c8488bb_s.gif" alt="bike">
				<span class="todos-thumb-span">do you want to borrow a bike?</span>
			</p>
		</div>
	</div>
	<div class="col line col2">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884611736_c436b7092e_s.gif" alt="my slipper">
				<span class="todos-thumb-span">my slipper</span>
			</p>
		</div>
	</div>
	<div class="col line col3">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884586016_104e199f31_s.gif" alt="Riviera C te d’Azur">
				<span class="todos-thumb-span">Riviera C te d’Azur</span>
			</p>
		</div>
	</div>
	<div class="col line col4">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884061365_19b7de880f_s.gif" alt="the small cake">
				<span class="todos-thumb-span">the small cake before the lunch</span>
			</p>
		</div>
	</div>
	<div class="col line col5">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5884625878_3d2d53c6f1_s.gif" alt="the runner">
				<span class="todos-thumb-span">the runner in nice</span>
			</p>
		</div>
	</div>
	<div class="col line col6">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5968805507_918b3be965_s.gif" alt="Musée du Louvre Sphinx">
				<span class="todos-thumb-span">Musée du Louvre Sphinx</span>
			</p>
		</div>
	</div>
	<div class="col line col7">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5968794447_c3231fc306_s.gif" alt="the coffee shop">
				<span class="todos-thumb-span">the coffee shop out of the Musée du Louvre</span>
			</p>
		</div>
	</div>
	<div class="col line col8">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5969349526_c98dd22352_s.gif" alt="Musée du Louvre out side's fountain">
				<span class="todos-thumb-span">Musée du Louvre out side's fountain</span>
			</p>
		</div>
	</div>
	<div class="col line col9">
		<div class="big todos-thumb">
			<p>
				<img src="img/loader.gif" data-src="img/5968797341_3e212999a5.gif" alt="Venus de Milo">
				<span class="todos-thumb-span">Venus de Milo</span>
			</p>
		</div>
	</div>
</div>
<!-- imageload effect -->
<script type="text/javascript">
$(function() {
	$("#demo img").unveil(300);
});
</script>
<!-- imageload effect -->

相关推荐

发表评论

相关文章