<!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>
<title>VaraTrade.com | The leading Currency Trading Education Portal </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="./js/aniAdvanced.js"></script>
<style type="text/css">
.animation1{ position:relative; width:1000px; height:305px; overflow:hidden; }
.animation2{ position:absolute; left:0px; top:0px; width:884px; height:305px; }
.animation3{ position:absolute; left:86px; top:0px; width:742px; height:305px; }
.animation3 img{ position:absolute; left:0px; top:0px; visibility:hidden; }
.animation3 img.selected{ visibility:visible; }
.animation3 .curtain{ cursor:pointer; position:absolute; left:0px; top:0px; width:742px; height:305px; background:#fff; filter: Alpha(opacity=0); -moz-opacity: 0; opacity:0; }
.animation3 .aninum{ position:absolute; left:5px; top:270px; }
.animation3 .aninum p{ font-size:13px; float:left; padding:0px 0px 0px 5px; width:13px; height:18px; background:url(./images/png2.png); margin-left:5px; cursor:pointer; color:#fff }
.animation3 .aninum p.selected{ background:url(./images/png1.png) }
.animation4{ position:absolute; left:0px; top:0px; width:86px; height:305px; cursor:pointer; }
</style>
<script>
$(document).ready(
function(){
ani2 = new animation2();
}
);
</script>
</head>
<body>
<div class="animation1">
<div class="animation2">
<img class="animation4" src="./images/png3.png" onclick="ani2.setpos(0)" />
<div class="animation3">
<img onclick="window.location='beginner.htm'" class="selected" src="./images/BeginnerTab1.jpg" alt="" />
<img onclick="window.location='beginner.htm'" src="./images/BeginnerTab2.jpg" alt="" />
<img onclick="window.location='beginner.htm'" src="./images/BeginnerTab3.jpg" alt="" />
<div onclick="window.location='beginner.htm'" class="curtain"></div>
<div class="aninum">
</div>
</div>
</div>
<div class="animation2">
<img class="animation4" src="./images/png4.png" onclick="ani2.setpos(1)" />
<div class="animation3">
<img onclick="window.location='seasoned.htm'" class="selected" src="./images/SeasonedTab1.jpg" alt="" />
<img onclick="window.location='seasoned.htm'" src="./images/SeasonedTab2.jpg" alt="" />
<div onclick="window.location='seasoned.htm'" class="curtain"></div>
<div class="aninum">
</div>
</div>
</div>
<div class="animation2">
<img class="animation4" src="./images/png5.png" onclick="ani2.setpos(2)" />
<div class="animation3">
<img onclick="window.location='advanced.htm'" class="selected" src="./images/AdvancedTab1.jpg" alt="" />
<img onclick="window.location='advanced.htm'" src="./images/AdvancedTab2.jpg" alt="" />
<div onclick="window.location='advanced.htm'" class="curtain"></div>
<div class="aninum">
</div>
</div>
</div>
</div>
</body>
</html>
JQuery 图片浏览和动画效果 淡入 淡出
5星 · 超过95%的资源 需积分: 9 124 浏览量
2011-01-03
16:23:26
上传
评论
收藏 556KB ZIP 举报 
jsAnimation.zip （17个子文件） 
jsAnimation 
Advanced.htm 3KB hAniImg.htm 2KB images 
png1.png 146B png4.png 4KB png3.png 3KB
BeginnerTab2.jpg 65KB SeasonedTab1.jpg 57KB BeginnerTab3.jpg 66KB AdvancedTab1.jpg 93KB AdvancedTab2.jpg 94KB SeasonedTab2.jpg 93KB png2.png 143B BeginnerTab1.jpg 60KB png5.png 3KB js aniAdvanced.js 3KB jquery-1.4.2.min.js 70KB hAniImg.js 3KB资源评论
cxzstudio2013-01-04效果可以，适合网站使用- mouzhenyong2012-02-28不错的效果，现在JQUERY兼容性都蛮不错的。
- a4977655072012-12-04很好用～用到首页效果很棒～
