基于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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
vue+element实现表单校验功能
May 20 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 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
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
php获取图片信息的方法详解
2015/12/10 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
高三学习决心书
2014/03/11 职场文书
信息技术课后反思
2014/04/27 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书