返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2020-05-18 09:02:17易采站长站整理

还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在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;

相关文章 大家在看