鼠标经过弹出图片信息特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标经过弹出图片信息特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link rel="stylesheet" media="all" type="text/css" href="css/photo-info.css" />
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/photo-info.js" type="text/javascript"></script>
<script language="javascript" src="js/720.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="frame">
<div class="wrap">
	<img src='images/frog.jpg' alt='' />
	<div>
		<b></b>
		<span>
		<h1>Red Eye Frog</h1>
		<p>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.</p> 
		<p>Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</p>
		<a href="#">more information...</a>
		</span>
	</div>
</div> <!-- end wrap -->
</div>

<div class="frame">
<div class="wrap">
	<img src='images/emperor.jpg' alt='' />
	<div>
		<b></b>
		<span>
		<h1>Emperor Penguin</h1>
		<p>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.</p>
		<p>The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22?7 kg (48?2 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches.</p>
		<a href="#">more information...</a>
		</span>
	</div>
</div> <!-- end wrap -->
</div>

<div class="frame">
<div class="wrap">
	<img src='images/pelican.jpg' alt='' />
	<div>
		<b></b>
		<span>
		<h1>Pelicans</h1>
		<p>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.</p>
		<p>Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.</p>
		<a href="#">more information...</a>
		</span>
	</div>
</div>
<br><br>
<div align="center">
<div style="clear:both;"></div></div>
<!-- 代码 结束 -->
</body>
</html>

JS代码(photo-info.js):

/* ================================================================This copyright notice must be untouched at all times.Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.=================================================================== */
$(document).ready(function(){
	$(".wrap div").hover(function(){
	$(this).animate({
	"top":"-300px"}
,400,"swing");
}
,function(){
	$(this).stop(true,false).animate({
	"top":"0px"}
,400,"swing");
}
);
}
);

CSS代码(photo-info.css):

.frame{width:220px;height:330px;padding:10px;background:#fff;border:1px solid #ccc;float:left;margin-right:8px;display:inline;}
.wrap{width:220px;height:330px;position:relative;overflow:hidden;font-family:arial,sans-serif;}
.wrap img{display:block;}
.wrap div{width:200px;height:320px;padding:300px 10px 10px 10px;position:absolute;left:0;top:0;background:url(trans.gif);}
.wrap div b{display:block;width:220px;height:330px;position:absolute;left:0;top:300px;z-index:1;background:#000;filter:alpha(opacity=40);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);opacity:0.40;}
.wrap div span{position:relative;z-index:500;}
.wrap div h1{font-size:22px;color:#fc0;text-align:center;margin:0;padding:0;}
.wrap div p{font-size:12px;color:#fff;line-height:16px;}
.wrap div a{color:#fc0;font-size:12px;position:absolute;left:0;top:300px;text-decoration:none;display:block;margin:0;text-align:right;width:200px;}
.wrap div a:hover{color:#ff0;}
.clear{clear:both;}

附件:下载该文件资源,减少时间成本(增值服务)