jquery ui iPicture图片提示插件鼠标悬停到图片上提示文字信息



142 567 190



特效描述:图片提示插件 鼠标悬停 提示文字信息,iPicture图片标注功能

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.8.16.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/jQuery.iPicture.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jQuery.iPicture.js"></script>

3. HTML代码

<div id="iPicture">
	<div class="slide">
		<div id="picture1" style="background:url('images/christmas.jpg') no-repeat scroll 0 0 #393737;width:900px;height:528px;position:relative;margin:0 auto;"></div>
	</div>
	<br/>
	<div class="slide">
		<div id="picture2" style="background:url('images/kitchen.jpg') no-repeat scroll 0 0 #393737;width:900px;height:528px;position:relative;margin:0 auto;"></div>
	</div>
	<br/>
	<div class="slide">
		<div id="picture3" style="background:url('images/kitchen2.jpg') no-repeat scroll 0 0 #393737;width:900px;height:528px;position:relative;margin:0 auto;"></div>
	</div>
	<br/>
	<div class="slide">
		<div id="picture4" style="background:url('images/kitchen3.jpg') no-repeat scroll 0 0 #393737;width:900px;height:528px;position:relative;margin:0 auto;"></div>
	</div>
	<br/>
	<div class="slide">
		<div id="picture5" style="background:url('images/bedroom.jpg') no-repeat scroll 0 0 #393737;width:900px;height:528px;position:relative;margin:0 auto;"></div>
	</div>
</div>	



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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