jQuery css3图片网格布局鼠标滑过图片弹出提示框



109 435 146



特效描述:jQuery css3 图片网格布局 鼠标滑过图片 弹出提示框,jQuery css3图片网格布局鼠标滑过图片弹出提示框

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="../sponsor/styles.css" />

2. 引入JS

<script type="text/javascript" src="../sponsor/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="../sponsor/js/jquery.flip.min.js"></script>
<script type="text/javascript" src="../sponsor/js/script.js"></script>

3. HTML代码

<div id="main">
	<div class="sponsorListHolder">
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/facebook.png" alt="More about facebook" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The biggest social network in the world.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.facebook.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/hp.png" alt="More about hp" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							One of the biggest computer manufacturers.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.hp.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/sony.png" alt="More about sony" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							A global multibillion electronics and entertainment company 
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.sony.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/cisco.png" alt="More about cisco" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The biggest networking and communications technology manufacturer.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.cisco.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/ea.png" alt="More about ea" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The biggest computer game manufacturer.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.ea.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/mysql.png" alt="More about mysql" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The most popular open source database engine.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.mysql.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/canon.png" alt="More about canon" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							Imaging and optical technology manufacturer.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.canon.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/digg.png" alt="More about digg" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							One of the most popular web 2.0 social networks.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.digg.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/microsoft.png" alt="More about microsoft" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							One of the top software companies of the world.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.microsoft.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/yahoo.png" alt="More about yahoo" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The most popular network of social media portals and services.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.yahoo.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/vimeo.png" alt="More about vimeo" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							A popular video-centric social networking site.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.vimeo.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/ebay.png" alt="More about ebay" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The biggest online auction and shopping websites.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.ebay.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/adobe.png" alt="More about adobe" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The leading software developer targeted at web designers and developers.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.adobe.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/dell.png" alt="More about dell" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							One of the biggest computer developers and assemblers.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.dell.com/</a>
						</div>
					</div>
				</div>
				<div class="sponsor" title="Click to flip">
					<div class="sponsorFlip">
						<img src="../sponsor/img/sponsors/google.png" alt="More about google" />
					</div>
					<div class="sponsorData">
						<div class="sponsorDescription">
							The company that redefined web search.
						</div>
						<div class="sponsorURL">
							<a href="http://www.51qianduan.com/">http://www.google.com/</a>
						</div>
					</div>
				</div>
    	<div class="clear"></div>
    </div>
</div>



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


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 弹出层拖动 背景切换 窗口提示框 滑动星星打分 手风琴 图表 图片 头像截图 其他更多 文字提示框 图片网格 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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