JQuery CSS3属性鼠标悬停到图片上感知方向滑动显示文字信息



75 299 100



特效描述: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

加群请备注:从官网了解到