您的位置：首页 > Web前端 > JQuery

jQuery实现图片导航切换

2009-06-24 09:47 393 查看

能力有限暂时支持ie6/7和FireFox
打开时候请确保已经把GOOGLE的js加载完了，只要左下角没有显示JS错误就说明加载完毕了多刷新几次就没问题

<!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" lang="zh-CN">
<head>
<title>JQuery图片导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
<script type="text/javascript">
/*
* Funly 阿立
* QQ:149025817
* http://www.funly.cn/ * http://www.myowen.net/ * Date: 2009-06
*/
$(document).ready(function(){
/*----------------------图片展示--------------------------------*/
// 添加标记，是否在渐变中
//----------------------------
var isFade =false;
//初始化透明度
$(".img_box>img").fadeTo(0,0.8);
$(".hidden").fadeTo(0,0.4);
//初始化放大
$(".img_box:eq(3)").animate({
top:"-24px",
height:"70px"
},0);
//鼠标进过图片
$(".img_box").hover(function(){
if(isFade)//防止出现渐变未完成重新开始渐变
return;
if($(this).css("top")=== "-24px") //如果已显示，则返回
return;
else
{
isFade = true;//标记开始
//获取图片地址
var img_src = $(this).children().attr("src");
//处理地址
img_src = img_src.replace("_min.gif",".gif");
//更换图片，渐变
$("#bg_img").fadeTo("fast",0.2,function(){
$("#bg_img").attr("src",img_src).fadeTo("slow",1.0,function(){
isFade = false;//标记结束
});
});
}
});
//鼠标经过，透明度更换
$(".img_box > img").hover(function(){
$(this).fadeTo("fast",1.0);
$('.hidden').fadeTo("fast",0.4);
},function(){
$(this).fadeTo("fast",0.8);
$(".hidden").fadeTo("fast",0.2);
});
//放大效果
$(".img_box").hover(function(){
if($(this).css("top")=== "-24px") //如果已经放大则返回
return;
$(".img_box").animate({
top:"11px",
height:"35px"
},0);
$(this).animate({
top:"-24px",
height:"70px"
},250);
});

});
</script>
<style type="text/css">
* { margin:0; padding:0; color:#00264D; font-size:12px; font-weight: normal; }
ul { margin:0px; padding:0px; }
#div_container { margin:0 auto; width:1003px; }
/* 循环图片 */
.img_div { background-color:#000; width:1003px; height:250px; overflow:hidden; z-index:1; }
/* 悬浮图片框架 */
#img_box_container { position:absolute; left:50%; margin-left:-501px; width:1003px; height:70px; top: 190px; z-index:2; }
.img_box { width:70px; height:35px; z-index:3; position:absolute; top: 11px; left: 35px; overflow:hidden; cursor:pointer; border: 1px solid #ffffff; }
.hidden { position:absolute; left:50%; margin-left:-501px; width:1003px; top: 190px; height:60px; z-index:2; background-color: #003366; border-top:#ffffff; border-top-width: 1px; border-top-style: solid; }
</style>
</head>
<body>

<div id="div_container">

<div id="container">
<div class="img_div"> <img id="bg_img" src="http://www.funly.cn/myimg/4.gif" width=1003 height=250 />
<div class="hidden"></div>
<div id="img_box_container" >
<div class="img_box"> <img id="img_unclick" src="http://www.funly.cn/myimg/1_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:180px"> <img id="img_unclick" src="http://www.funly.cn/myimg/2_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:325px"> <img id="img_unclick" src="http://www.funly.cn/myimg/3_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:470px"> <img id="img_unclick" src="http://www.funly.cn/myimg/4_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:615px"> <img src="http://www.funly.cn/myimg/5_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:760px"> <img id="img_unclick" src="http://www.funly.cn/myimg/6_min.gif" width=70 height=70 /> </div>
<div class="img_box" style="left:905px"> <img id="img_unclick" src="http://www.funly.cn/myimg/7_min.gif" width=70 height=70 /> </div>
</div>
</div>
</div>

</div>

</body>
</html>
实例演示请点击查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航