利用jQuery实现浮动层效果



69 272 91



特效描述:利用jQuery实现 浮动层效果,利用jQuery实现浮动层效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fancy.css" media="screen" />

2. 引入JS

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.0.0.js"></script>

3. HTML代码

				<h1>Examples</h1>
				<p id="test1">
					<b>Fancy single images</b>
					<br />
					<a href="images/1_b.jpg"><img alt="" src="images/1_s.jpg" /></a>
					<a title="Very fancy caption to this image" href="images/2_b.jpg"><img alt="" src="images/2_s.jpg" /></a>
					<a title="This is the ART" href="images/13_b.jpg"><img alt="" src="images/13_s.jpg" /></a>
				</p>
				<p>
				<select>
					<option>Pellentesque eleifend</option>
					<option>Pellentesque mi sapien</option>
				</select>
			</p>
				<p id="test2">
					<b>Grouped images (no zooming animation, adds overlay)</b>
					<br />
					<a rel="group1" href="images/4_b.jpg"><img alt="" src="images/4_s.jpg" /></a>
					<a rel="group1" title="Very fancy caption to this image" href="images/5_b.jpg"><img alt="" src="images/5_s.jpg" /></a>
					<a rel="group1" title="Life" href="images/10_b.jpg"><img alt="" src="images/10_s.jpg" /></a>
				</p>
				<p id="test4">
					<b>More usage examples</b>
				</p>
				<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<th>Custom defined image set</th>
					<th>Inline content</th>
					<th>Iframed content</th>
				</tr>
				<tr>
					<td><a id="custom_1" href="javascript:;"><img alt="" src="images/6_s.jpg" /></a></td>
					<td><a id="custom_2" href="#testube" class="{frameWidth: 425, frameHeight: 355}"><img alt="" src="images/15_s.jpg" /></a></td>
					<td><a id="custom_3" href="http://www.51qianduan.com//"><img alt="" src="images/16_s.jpg" /></a></td>
				</tr>
				</table>
				<div style="display:none" id="testube">
					<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/-_jhdZoPW1Q&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/-_jhdZoPW1Q&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>
				</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 图片放大镜 图片淡出淡进 带标题的焦点图 图片广告 文字放大缩小 图片放大缩小 文字淡出淡进 带缩略图的幻灯片 带简介的焦点图 数字放大缩小 对联广告 图片轮播 自动滚动图片轮播 叠加浮动层 马赛克幻灯片 全屏焦点图 flash焦点图 悬浮浮动漂浮 浮动提示框 缩放放大缩小 渐隐切换 淡出淡入淡进 缩放切换 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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