基于jquery的direction图片渐变动画效果

151 阅读 0 评论 100 点赞

我是靠谱客的博主谦让棒球，最近开发中收集的这篇文章主要介绍基于jquery的direction图片渐变动画效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果，
下面就开始我们的代码编写吧
html是比较简单的
代码

复制代码代码如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
<TITLE>myjquerydirection</TITLE> 
<META http-equiv=content-type content="text/html; charset=gb2312"> 
<link rel="stylesheet" type="text/css" href="css/dirction.css"> 
<script language=javascript src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript" src="js/drection.js"></script> 
</head> 
<body> 
<div id=nav> 
<ul> 
<li><img src="images/02.jpg" text="美景如画的海景|天蓝海蓝" pic="2"> 
<div>一个海岛</div></li> 
<li><img src="images/01.jpg" text="Handy Code|春华秋实" pic="1"> 
<div>一片麦穗</div></li> 
<li><img src="images/03.jpg" text="郁郁葱葱的生命|生生不息的生命" pic="3"> 
<div>一树绿叶</div></li> 
<li><img src="images/04.jpg" text="孤独的一棵老树|等谁呢？" pic="4"> 
<div>一棵大树</div></li> 
<li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5"> 
<div>一地葵花</div></li></ul> 
<div id=frontTextBack></div> 
<div id=frontText></div> 
<div id=frontTextSub></div> 
<div id=BG></div> 
<div id=mask></div> 
<div id=back><img height="240" src="images/2.jpg" width="760"</div> 
</div> 
</body> 
</html> 

这里有多个div标签 id=frontTextBack的标签是显示通过css滤镜来实现阴影，其他的代码就没有什么好说的了
现在开始我们的css代码的编写了
首先从顶层开始编写
代码

复制代码代码如下:

 
body { padding:0; 
moz-user-select: none; 
margin:0; 
} 
#nav { background: url("loadsmall.gif") no-repeat scroll 330px 100px #000; 
height:240px; 
overflow:hidden; 
position:relative; 
width:760px; 
display:block; 
} 
#nav ul { bottom:0px; 
left:3px; 
position:absolute; 
text-align:left; 
z-index:999; 
} 
#nav ul li { list-style:none; 
display:block; 
float:left; 
height:50px; 
width:140px; 
font-size:12px; 
position:relative; 
} 
#nav li img{ border:1px solid white; 
cursor:pointer; 
float:left; 
height:35px; 
left:10px; 
top:5px; 
width:52px; 
margin-top:10px; 
} 
#nav li div{ FILTER: alpha(opacity=60); 
margin-left:70px; 
margin-top:5px; 
padding-left:10px; 
color:white; 
} 
#frontTextBack{color:#000; 
font-family:Verdana; 
font-size:30px; 
left:22px; 
position:absolute; 
width:100%; 
top:22px; 
} 
#frontText { color:#fff; 
font-size:30px; 
font-weight:900; 
left:20px; 
position:absolute; 
top:20px; 
width:100%; 
z-index:999; 
} 
#frontTextSub{color:#fff; 
font-size:13px; 
left:25px; 
position:absolute; 
top:60px; 
width:100%; 
} 
#BG { background:none repeat scroll 0 0 #000; 
border-top:1px solid #999; 
bottom:0; 
height:50px; 
position:absolute; 
text-align:right; 
width:100%; 
} 
#mask { background:repeat scroll 0 0 transparent; 
height:100%; 
position:absolute; 
width:100%; 
z-index:990; 
} 
#back { text-align:center; 
} 
.gray {FILTER:gray(); } //滤镜设置成灰 

接下来就是js的编写了js
代码
首先加载

复制代码代码如下:

 
$(function(){ 
//首先找到需要点击的img 
$("li img").click(function(){ 
//判断一下当前img是否已经被点中 
if(this.className.indexOf("active") !=-1) 
{ 
return; 
} 
//获取数据 
var i=$(this).attr("pic"); 
//获取要显示的文本内容,并以|把text分割成数组 
var t=$(this).attr("text").split("|"); 
//改变文本的淡出,通过控制透明度来改变动画的效果 
$("#frontText").fadeOut(); 
$("#frontTextBack").fadeOut(); 
$("#frontTextSub").fadeOut(); 
//处理当前active的img恢复原样 
$("li img.active").animate({top:5,width:52,left:10},300) 
.removeClass("active") 
.fadeTo(200,0.6) 
//处理当前的active的img 
$(this).animate({top:-5,width:40,height:70,left:1},300) 
.addClass("active") 
.fadeTo(200,1) 
//处理显示的div的大图 
$("#back").children().addClass("gray").end() 
.fadeIn(500,0.1,function(){ 
$(this).children("img").attr("src","imgaes/"+i+".jpg").removeClass("gray"); 
$(this).fadeTo(500,1,function(){ 
$("#frontText").html(t[0]).fadeIn(200); //更改正文文字 
$("#frontTextBack").html(t[0]).fadeIn(200); //阴影文字 
$("#frontTextSub").html(t[1]).fadeIn(200)} //副标题 
); 
}); 
}); 
}); 
//初始化第一张图 
var i =0; 
show(); 
function show(){ 
if (i==$("li img").size()) i = 0 
$("li img").eq(i).click(); 
i++; 
//setTimeout(show(),1000); 
} 