JQuery CSS3屬性鼠標懸停到圖片上感知方向滑動顯示文字信息



77 305 102



特效描述:JQuery CSS3屬性 鼠標懸停到圖片上 感知方向 滑動顯示文字信息,鼠標懸停到圖片上感知方向滑動顯示文字信息

代碼結構

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Alegreya+SC:700,400italic' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

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

3. HTML代碼

<div class="codrops-demos">
	<a class="current-demo" href="index.html">Default</a>
	<a href="index2.html">Delay</a>
	<a href="index3.html">Inverse</a>
</div>
<ul id="da-thumbs" class="da-thumbs">
	<li>
		<a href="#505046-Menu">
			<img src="images/1.jpg" />
			<div><span>Menu by Simon Jensen</span></div>
		</a>
	</li>
	<li>
		<a href="#504336-TN-Aquarium">
			<img src="images/2.jpg" />
			<div><span>TN Aquarium by Charlie Gann</span></div>
		</a>
	</li>
	<li>
		<a href="#504197-Mr-Crabs">
			<img src="images/3.jpg" />
			<div><span>Mr. Crabs by John Generalov</span></div>
		</a>
	</li>
	<li>
		<a href="#503731-Gallery-of-Mo-2-Mo-logo">
			<img src="images/4.jpg" />
			<div><span>Gallery of Mo 2.Mo logo by Adam Campion</span></div>
		</a>
	</li>
	<li>	
		<a href="#503058-Ice-Cream-nom-nom">
			<img src="images/5.jpg" />
			<div><span>Ice Cream - nom nom by Eight Hour Day</span></div>
		</a>
	</li>
	<li>
		<a href="#502927-My-Muse">
			<img src="images/6.jpg" />
			<div><span>My Muse by Zachary Horst</span></div>
		</a>
	</li>
	<li>
		<a href="#502538-Natalie-Justin-Cleaning">
			<img src="images/7.jpg" />
			<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
		</a>
	</li>
	<li>
		<a href="#502523-App-Preview">
			<img src="images/8.jpg" />
			<div><span>App Preview by Ryan Deshler</span></div>
		</a>
	</li>
	<li>
		<a href="#501695-Cornwall-Map">
			<img src="images/9.jpg" />
			<div><span>Cornwall Map by Katharina Maria Zimmermann</span></div>
		</a>
	</li>
	<li>
		<a href="#500861-final-AD-logo">
			<img src="images/10.jpg" />
			<div><span>final AD logo by Annette Diana</span></div>
		</a>
	</li>
	<li>
		<a href="#500369-Land-Those-Planes">
			<img src="images/11.jpg" />
			<div><span>Land Those Planes by Lee Ann Marcel</span></div>
		</a>
	</li>
	<li>
		<a href="#497795-Seahorse">
			<img src="images/12.jpg" />
			<div><span>Seahorse by Trevor Basset</span></div>
		</a>
	</li>
</ul>
<script type="text/javascript">
$(function() {
	$('#da-thumbs > li').hoverdir();
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 其他 圖片滑動 圖片滑塊 文字滑動 文字滑塊 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子