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


Posted in Javascript onMay 24, 2010

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在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); 
}
Javascript 相关文章推荐
不同浏览器的怪癖小结
Jul 11 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
vue实现分页组件
Jun 16 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 #Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
May 22 #Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 #Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 #Javascript
Javascript笔记一 js以及json基础使用说明
May 22 #Javascript
javascript Array数组对象的扩展函数代码
May 22 #Javascript
You might like
SONY SRF-M100的电路分析
2021/03/02 无线电
php设计模式 State (状态模式)
2011/06/26 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
JS求平均值的小例子
2013/11/29 Javascript
javascript 闭包详解
2015/02/15 Javascript
常用jQuery代码分享
2015/07/14 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
详解Angular 开发环境搭建
2017/06/22 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python中的函数作用域
2018/05/07 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
25岁生日感言
2014/01/13 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
条幅标语大全
2014/06/20 职场文书
妇女工作先进事迹
2014/08/17 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
运动会闭幕词
2015/01/28 职场文书
太行山上观后感
2015/06/05 职场文书