jquery 图片特效
教育网站，图片展示特效
<!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=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0; border:0;}
ul ,li{ list-style:none; font-size:12px;}
.bd2{width: 808px; clear: both;}
.bd-con{height:335px; padding: 0 0 0 10px;}
.h_tm_listR{width: 530px; padding: 12px 6px 0 0px; height: 332px; background: url(http://www.xnxss.com/images/h_team_bg.gif) no-repeat 3px 12px;}
.h_tm_listR li a.hover span {
width: 66px;
height: 92px;
background: url(http://www.xnxss.com/images/h_tm_v.gif) no-repeat left top;
position: absolute;
left: 4px;
top: -110px;
filter: alpha(opacity=75);
opacity: .75;
}
.h_tm_listR li a:hover span {
width: 66px;
height: 92px;
background: url(http://www.xnxss.com/images/h_tm_v.gif) no-repeat left top;
position: absolute;
left: 4px;
top: -110px;
filter: alpha(opacity=75);
opacity: .75;
}
.h_tm_listR li {width:74px; height: 110px; text-align:center; float:left; position: relative; overflow: hidden;}
.fr{float: right;}
.fl{ float:left;}
.fr,.fl{ display:inline;}
.ttc{width: 222px; height: 312px;position: relative; margin: 13px 0 0 12px; padding-right: 15px; border-right: 1px solid #E1E1E1;}
.ttc em{height: 70px;background: #000; filter: alpha(opacity=65); opacity: .65;}
.ttc span, .ttc em {
width: 202px; position: absolute; left: 0px; /** bottom: 0px;**/ padding: 10px; line-height: 120%; top:220px;}
.T_bai, a.T_bai, .T_bai a, .T_bai a:visited {color: #FFF;}
.ttc span ins {color: #999; font-size: 14px;}
.t10 {font-size: 10px;}
ins, i {text-decoration: none; font-style: normal;}
.dec{ font-size:12px;}
.ttc span strong {
font-size: 14px;}
</style>
<body>
<div class="mr">
<!----------bd2 star----------->
<div class="bd2">
<div class="bd-con">
<div class="h_tm_listR fr">
<ul>
<li><a href="#" title="祝亚芹老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112853128749.jpg" rev="祝亚芹老师：1999年-2003年2月任绍兴老麦婚纱影楼化妆部主管20003年3月2004年10月任杭…"><img alt="祝亚芹老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112853128749.jpg" width="66" height="90"><span></span></a></li>
<li><a href="#" title="化妆十佳郑美老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112853013749.jpg" rev="郑美老师：全国第五届化妆造型师十佳郑州禧年新时尚化妆摄影学校化妆部技术总监国级高…"><img alt="化妆十佳郑美老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112853013749.jpg" width="66" height="90"><span></span></a></li>
<li><a href="#" title="于仲安老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112852899989.jpg" rev="1975年参加人像摄影工作至今共三十二年1986年开始参加世界影展至今共获得国际奖项200…"><img alt="于仲安老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112852899989.jpg" width="66" height="90"><span></span></a></li>
<li></li>
<li><a href="#" title="摄影十杰陈观山" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112852784393.jpg" rev=""><img alt="摄影十杰陈观山" src="http://www.xnxss.com/up/goodimage/2011/11/2011112852784393.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="孙君老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112854218521.jpg" rev="摄影名师孙君：著名样片拍摄专家。人像摄影创意时尚主流代表，其做品数次引发业界关注…"><img alt="孙君老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112854218521.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="阿丽老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112853930105.jpg" rev="化妆名师阿丽：资深化妆师从事影楼化妆数年，见正婚纱影楼化妆的流行过程。更积累丰富…"><img alt="阿丽老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112853930105.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li></li>
<li><a href="#" title="芳子老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040935329853.JPG" rev=""><img alt="芳子老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040935329853.JPG" width="66" height="90"><span></span></a></li>
<li><a href="#" title="陈思华老师" alt="http://www.xnxss.com/up/goodimage/2012/11/2012112945226861.jpg" rev="美发名师陈思华：国家高级美发技师：多次获得国家级美发大赛奖项；曾担任大型美发企业…"><img alt="陈思华老师" src="http://www.xnxss.com/up/goodimage/2012/11/2012112945226861.jpg" width="66" height="90"><span></span></a></li>
<li><a href="#" title="光瑞老师" alt="http://www.xnxss.com/up/goodimage/2012/11/2012112944784649.jpg" rev="高级美发讲师光瑞老师：国家高级美发技师；曾担任大型美发企业培训导师，具有丰富的美…"><img alt="光瑞老师" src="http://www.xnxss.com/up/goodimage/2012/11/2012112944784649.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="哲哲老师" alt="http://www.xnxss.com/up/goodimage/2012/11/2012112942114105.jpg" rev="哲哲老师：禧年新时尚学校高级化妆讲师；曾任国内多家大型影楼高级化妆造型师；对影楼…"><img alt="哲哲老师" src="http://www.xnxss.com/up/goodimage/2012/11/2012112942114105.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li></li>
<li><a href="#" title="贺佳贝老师" alt="http://www.xnxss.com/up/goodimage/2012/11/2012112441624909.jpg" rev=""><img alt="贺佳贝老师" src="http://www.xnxss.com/up/goodimage/2012/11/2012112441624909.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="李斌老师" alt="http://www.xnxss.com/up/goodimage/2011/11/2011112854009953.jpg" rev=" 高级摄影讲师李斌"><img alt="李斌老师" src="http://www.xnxss.com/up/goodimage/2011/11/2011112854009953.jpg" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="李莹老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040934775217.JPG" rev="国家级认证高级美容讲师、美容导师；具有最具代表性的美容理念，被誉为" 美丽天使"之…"=""><img alt="李莹老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040934775217.JPG" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="海歌老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040935098925.JPG" rev="担任多家大型影楼化妆总监首席造型师入行至今曾担任各类大型晚会造型设计，多年化妆培…"><img alt="海歌老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040935098925.JPG" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li><a href="#" title="丹霞老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040935552465.JPG" rev=" 化妆讲师丹霞"><img alt="丹霞老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040935552465.JPG" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
<li></li>
<li><a href="#" title="刘霞老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040937174949.JPG" rev=""><img alt="刘霞老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040937174949.JPG" width="66" height="90"><span></span></a></li>
<li><a href="#" title="巧巧老师" alt="http://www.xnxss.com/up/goodimage/2014/4/2014040937527829.JPG" rev="巧巧老师简介：中国化妆名师，第三届全国化妆十佳大赛十佳化妆师。《人像摄影》化妆造…"><img alt="巧巧老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040937527829.JPG" width="66" height="90"><span style="top: -110px; opacity: 0;"></span></a></li>
</ul>
</div>
<div class="ttc fl">
<em></em>
<span class="T_bai"><strong class="title">巧巧老师</strong> <ins class="t10">‹NAME›</ins><p class="dec">巧巧老师简介：中国化妆名师，第三届全国化妆十佳大赛十佳化妆师。《人像摄影》化妆造…</p></span>
<img class="pic" alt="巧巧老师" src="http://www.xnxss.com/up/goodimage/2014/4/2014040937527829.JPG" width="222" height="312"/>
</div>
</div>
</div>
<!--------bd2 end-------------->
</div>
<script type="text/javascript">
//$("div.h_tm_listR ul li a").hover(function(){
//var dispy=this //全局变量
//$(dispy).find("span").stop().animate({top:0,opacity:0.75},250);
//$(".ttc").stop().animate({opacity:0},250,function(){
//$(".ttc .title").html($(dispy).attr("title"));// 获取title
//$(".ttc .dec").html($(dispy).attr("title"));// 获取title
//$(".ttc img").attr("src",$(dispy).attr("alt"));//获取图片 alt标签 ,以及图片路径
//});
//$(".ttc").animate({opacity:1}, 250);
//}, function() {
//if($(this).attr("class") != 'hover'){
//$(this).find("span").stop().animate({top:-110,opacity:0}, 250); //小图悬浮，背景换色 高度250；
//}
//})
</script>
<script type="text/javascript">
$("div.h_tm_listR ul li a").hover(function(){
var dispy=this //全局变量
$(dispy).find("span").stop().fadeIn(800).css({"height":"250px","top":"0px"});
$(".ttc").stop().css({"height":"250px","top":"0px"}).fadeIn(800,function(){
$(".ttc .title").html($(dispy).attr("title"));// 获取title
$(".ttc .dec").html($(dispy).attr("rev"));// 获取title
$(".ttc img").attr("src",$(dispy).attr("alt"));//获取图片 alt标签 ,以及图片路径
});
$(".ttc").fadeIn().css({"height":"250px","top":"0px"});
}, function() {
if($(this).attr("class") != 'hover'){
$(this).find("span").stop().fadeIn(800).css({"height":"250px","top":"0px"}); //小图悬浮，背景换色 高度250；
}
})
</script>
</body>
</html>