以下是 jquery滑屏切换效果代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery滑屏切换效果</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
//优质网店div背景图片切换
$(".dp").hover(
function () {
$(this).removeClass("dp").addClass("dp1");
},
function () {
$(this).removeClass("dp1").addClass("dp");
}
);
});
</script>
<script src="js/cfcoda.js" language="javascript"></script>
<!--下拉搜索框开始-->
<script>
$(function(){
$(".active1").click(function(){
$(this).find(".xiala").show();
},function(){
$(this).find(".xiala").hide();
});
});
</script>
<script>
$(document).ready(function(){
$(".taobao").click(function(){
$(".xiala").hide(100);
$(".activelogo").attr('src',"images/taobao.jpg")
})
})
$(document).ready(function(){
$(".suning").click(function(){
$(".xiala").hide(100);
$(".activelogo").attr('src',"images/suning.jpg")
})
})
$(document).ready(function(){
$(".dangdang").click(function(){
$(".xiala").hide(100);
$(".activelogo").attr('src',"images/dangdang.jpg");
})
})
</script>
<!--下拉搜索框结束-->
<script>
$(function() {
$(".content").find("a").each(function() {
$(this).hover(function() {
$(this).siblings().find(".mask").stop();
$(this).siblings().find(".mask").fadeTo("fast",0.3);
},
function() {
$(this).siblings().find(".mask").stop();
$(this).siblings().find(".mask").fadeTo("fast",0);
});
});
})
</script>
<script>
$(function(){
$(".item2").hover(function(){
$(this).find(".mhover").show();
},function(){
$(this).find(".mhover").hide();
});
});
</script>
<script>
$(function(){
$(".item1").hover(function(){
$(this).find(".mhover").show();
},function(){
$(this).find(".mhover").hide();
});
});
</script>
<!--标题修改-->
<script>
$(document).ready(function(){
$("#home-tab").click(function(){
$('.title').html('省钱好站');
})
})
$(document).ready(function(){
$("#about-tab").click(function(){
$('.title').html('热销单品');
})
})
$(document).ready(function(){
$("#downloads-tab").click(function(){
$('.title').html('优质网店');
})
})
$(document).ready(function(){
$("#faq-tab").click(function(){
$('.title').html('品牌推荐');
})
})
$(document).ready(function(){
$("#contact-tab").click(function(){
$('.title').html('优惠活动');
})
})
</script>
<script type="text/javascript">
$(function(){
$(".active1").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$(".xiala").show();
});
$(".xiala").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
document.onclick = function(){
$(".xiala").hide();
};
})
</script>
</head>
<body>
<div class="wrapper">
<Div style="width:1024px;margin:0 auto;">
<!--头部开始-->
<div class="head">
<div class="title">省钱好站</div>
<div class="search">
<span class="active1">
<img class="activelogo" src="images/taobao.jpg" width="16" height="16">
<!--下拉框开始-->
<div class="xiala">
<ul>
<li class="taobao">
<div class="xlogo"><img src="images/taobao.jpg" width="16" height="16"></div>
淘宝
</li>
<li class="suning">
<div class="xlogo"><img src="images/suning.jpg" width="16" height="16"></div>
苏宁
</li>
<li class="dangdang">
<div class="xlogo"><img src="images/dangdang.jpg" width="16" height="16"></div>
当当
</li>
</ul>
</div>
<!--下拉框结束-->
</span>
<input name="" type="text" class="sousuo" onfocus="this.className='sousuo';this.onmouseout='';if(this.value=='输入想买的宝贝') {this.value='';}" onblur="this.className='sousuo';this.onmouseout=function(){this.className='sousuo'};if(this.value=='') {this.value='输入想买的宝贝';}" onmouseout="this.className='sousuo'" value="输入想买的宝贝">
<input type="submit" class="search-button" value="搜 索">
</div>
<!--下拉框开始-->
<div class="xiala">
<ul>
<li class="taobao">
<div class="xlogo"><img src="images/taobao.jpg" width="16" height="16"></div>
淘宝
</li>
<li class="suning">
<div class="xlogo"><img src="images/suning.jpg" width="16" height="16"></div>
苏宁
</li>
<li class="dangdang">
<div class="xlogo"><img src="images/dangdang.jpg" width="16" height="16"></div>
当当
</li>
</ul>
</div>
<!--下拉框结束-->
</div>
<!--头部结束-->
</Div>
</div>
<div id="frame">
<div id="scroller">
<div id="content">
<div class="section" id="home-pane">
<div class="page1">
<div class="content">
<ul style="margin-bottom:30px;">
<li>
<div class="tu">
<a href="#"><img src="images/page1/taobao.png" width="87" height="87"></a>
</div>
<div class="bt">淘宝网</div>
<div class="fx">平均返现<span>50%</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/360buy.png" width="86" height="87"></a>
</div>
<div class="bt">京东商城</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/suning.png" width="87" height="87"></a>
</div>
<div class="bt">苏宁易购</div>
<div class="fx">返<span>0-3840积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/vancl.png" width="87" height="87"></a>
</div>
<div class="bt">凡客诚品</div>
<div class="fx">返<span>积分（随机）</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/dida.png" width="87" height="87"></a>
</div>
<div class="bt">嘀嗒团</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/yixun.png" width="87" height="87"></a>
</div>
<div class="bt">易讯网</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/dangdang.png" width="87" height="87"></a>
</div>
<div class="bt">当当网</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
</ul>
<ul style="margin-bottom:30px;">
<li>
<div class="tu">
<a href="#"><img src="images/page1/joyo.png" width="87" height="87"></a>
</div>
<div class="bt">卓越亚马逊</div>
<div class="fx">平均返现<span>50%</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/1hao.png" width="86" height="87"></a>
</div>
<div class="bt">一号店</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/newegg.png" width="87" height="87"></a>
</div>
<div class="bt">新蛋</div>
<div class="fx">返<span>0-3840积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/58.png" width="87" height="87"></a>
</div>
<div class="bt">58团</div>
<div class="fx">返<span>积分（随机）</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/jumei.png" width="87" height="87"></a>
</div>
<div class="bt">聚美优品</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/yintai.png" width="87" height="87"></a>
</div>
<div class="bt">银泰</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/mengbasha.png" width="87" height="87"></a>
</div>
<div class="bt">梦芭莎</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
</ul>
<ul style="margin-bottom:30px;">
<li>
<div class="tu">
<a href="#"><img src="images/page1/meituan.png" width="87" height="87"></a>
</div>
<div class="bt">美团网</div>
<div class="fx">平均返现<span>50%</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/lashou.png" width="86" height="87"></a>
</div>
<div class="bt">拉手网</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/kuba.png" width="87" height="87"></a>
</div>
<div class="bt">库巴购物网</div>
<div class="fx">返<span>0-3840积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/vjia.png" width="87" height="87"></a>
</div>
<div class="bt">Vjia</div>
<div class="fx">返<span>积分（随机）</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/24quan.png" width="87" height="87"></a>
</div>
<div class="bt">24券</div>
<div class="fx">平均返现<span>45元</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/kaixin.png" width="87" height="87"></a>
</div>
<div class="bt">开心团购</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
<li>
<div class="tu">
<a href="#"><img src="images/page1/lefeng.png" width="87" height="87"></a>
</div>
<div class="bt">乐蜂网</div>
<div class="fx">返<span>0-4800积分</span></div>
</li>
</ul>
</div>
</div>
</div>
<div class="section" id="about-pane">
<div class="page4">
<div class="content">
<a href="#" style="position:absolute;top:0px;left:0px;" class="item1"><img src="images/rx/big.jpg" width="250" height="250">
<div class="mask m1" style="opacity: 0; "></div>
<div class="mhover" style="display: none; ">
<div class="mleft">¥ <span>29.90</span></div>
<div class="mright">¥ <span>5.00</span></div>
</div>
</a>
<a href="#" style="position:absolute;top:0px;left:260px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:0px;left:390px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:0px;left:520px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:0px;left:650px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:0px;left:780px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:130px;left:260px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:130px;left:390px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:130px;left:520px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:130px;left:650px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;top:130px;left:780px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:0px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:130px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:260px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:390px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:520px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:650px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:780px;" class="item2"><img src="images/rx/1.jpg" width="120" height="120">
<div class="mask m2" style="opacity: 0; "></div>
<div class="mhover">
¥<span>29.90</span> 返 ¥<span>5.00</span>
</div>
</a>
</div>
</div>
</div>
<div class="section" id="downloads-pane">
<div class="page5">
<div class="content">
<!--店铺1开始-->
<div class="dp" style="position:absolute;top:0px;left:0px;" id="dpp">
<div class="wai">
<div class="xinxi">
<div class="dplogo"><a href="#"><img src="images/dp/logo1.jpg" width="40" height="40"></a></div>
<div class="name">
<div class="bt"><a href="#"><span>7GEGE</span> TOP潮品 欧美日系品质女装</a></div>
<div class="zuan">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
</div>
</div>
</div>
<div class="tjpic">
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money">¥<span>309.00</span></div>
</div>
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money">¥<span>309.00</span></div>
</div>
<div class="tu">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money">¥<span>309.00</span></div>
</div>
</div>
</div>
</div>
<!--店铺1结束-->
<!--店铺2开始-->
<div class="dp" style="position:absolute;top:0px;right:0px;">
<div class="wai">
<div class="xinxi">
<div class="dplogo"><a href="#"><img src="images/dp/logo2.jpg" width="40" height="40"></a></div>
<div class="name">
<div class="bt"><a href="#"><span>CIAO</span>!da Fanfan俏 原创尖端小欧美风淘品牌</a></div>
<div class="zuan">
<img src="images/dp/huangguan.jpg" width="16" height="17"></div>
</div>
</div>
<div class="tjpic">
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money">¥<span>25.00</span></div>
</div>
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>25.00</span></div>
</div>
<div class="tu">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>25.00</span></div>
</div>
</div>
</div>
</div>
<!--店铺2结束-->
<!--店铺3开始-->
<div class="dp" style="position:absolute;bottom:0px;left:0px;">
<div class="wai">
<div class="xinxi">
<div class="dplogo"><a href="#"><img src="images/dp/logo1.jpg" width="40" height="40"></a></div>
<div class="name">
<div class="bt"><a href="#"><span>7GEGE</span> TOP潮品 欧美日系品质女装</a></div>
<div class="zuan">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
<img src="images/dp/lanzuan.jpg" width="15" height="13">
</div>
</div>
</div>
<div class="tjpic">
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money">¥<span>309.00</span></div>
</div>
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>309.00</span></div>
</div>
<div class="tu">
<a href="#"><img src="images/dp/1.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>309.00</span></div>
</div>
</div>
</div>
</div>
<!--店铺3结束-->
<!--店铺4开始-->
<div class="dp" style="position:absolute;bottom:0px;right:0px;">
<div class="wai">
<div class="xinxi">
<div class="dplogo"><a href="#"><img src="images/dp/logo2.jpg" width="40" height="40"></a></div>
<div class="name">
<div class="bt"><a href="#"><span>CIAO</span>!da Fanfan俏 原创尖端小欧美风淘品牌</a></div>
<div class="zuan">
<img src="images/dp/huangguan.jpg" width="16" height="17"></div>
</div>
</div>
<div class="tjpic">
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>25.00</span></div>
</div>
<div class="tu" style="margin-right:12px;">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money" "="">¥<span>25.00</span></div>
</div>
<div class="tu">
<a href="#"><img src="images/dp/4.jpg" width="130" height="130"></a>
<div class="money">¥<span>25.00</span></div>
</div>
</div>
</div>
</div>
<!--店铺4结束-->
</div>
</div>
</div>
<div class="section" id="faq-pane">
<div class="page2">
<div class="content">
<a href="#" style="position:absolute;top:0px;left:0px;"><img src="images/pinpai/1.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:0px;left:185px;"><img src="images/pinpai/2.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:0px;left:370px;"><img src="images/pinpai/3.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:0px;right:0px;"><img src="images/pinpai/4.jpg" width="346" height="210">
<div class="mask m2" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;left:0px;bottom:0px;"><img src="images/pinpai/5.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:185px;"><img src="images/pinpai/6.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:370px;"><img src="images/pinpai/7.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;bottom:0px;left:554px;"><img src="images/pinpai/8.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;bottom:0px;right:0px;"><img src="images/pinpai/9.jpg" width="160" height="210">
<div class="mask m1" style="opacity: 0; "></div>
</a>
</div>
</div>
</div>
<div class="section" id="contact-pane">
<div class="page3">
<div class="content">
<a href="#" style="position:absolute;top:0px;left:0px;"><img src="images/yh/1.jpg" width="444" height="148">
<div class="mask m1" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:0px;right:0px;"><img src="images/yh/2.jpg" width="444" height="148">
<div class="mask m2" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:160px;left:0px;"><img src="images/yh/3.jpg" width="444" height="148">
<div class="mask m3" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:160px;right:0px;"><img src="images/yh/4.jpg" width="444" height="148">
<div class="mask m4" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:320px;left:0px;"><img src="images/yh/5.jpg" width="444" height="148">
<div class="mask m5" style="opacity: 0; "></div>
</a>
<a href="#" style="position:absolute;top:320px;right:0px;"><img src="images/yh/6.jpg" width="443" height="148">
<div class="mask m6" style="opacity: 0; "></div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">
<ul id="toolbar" class="navigation">
<li id="home-tab" class="active"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">省钱好站</a></li>
<li id="about-tab" class="inactive"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">热销单品</a></li>
<li id="downloads-tab" class="inactive"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">优质网店</a></li>
<li id="faq-tab" class="inactive"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">品牌推荐</a></li>
<li id="contact-tab" class="inactive"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">优惠活动</a></li>
</ul>
</div>
</div>
</body>
</html>
JS代码(cfcoda.js):
////Code taken and adapted from CodaEffects.js - (C) 2007 Panic,Inc.//http://www.panic.com// http://www.jb51.net////var currentSection = "home-pane";
// The default loaded section on the pagevar tabTag = "-tab";
var paneTag = "-pane";
// Scroll the page manually to the position of element "link",passed to us.function ScrollSection(link,scrollArea,offset){
// Store the last section,and update the current sectionif (currentSection == link){
return;
}
lastSection = currentSection;
currentSection = link;
// Change the section highlight.// Extract the root section name,and use that to change the background image to 'top',revealing the alt. state sectionTab = currentSection.split("-")[0] + tabTag;
document.getElementById(sectionTab).className = 'active';
if (lastSection){
lastTab = lastSection.split("-")[0] + tabTag;
document.getElementById(lastTab).className = "inactive";
}
// Get the element we want to scroll,get the position of the element to scroll totheScroll = document.getElementById(scrollArea);
position = findElementPos(document.getElementById(link));
// Get the position of the offset div -- the div at the far left.// This is the amount we compensate for when scrollingif (offset != ""){
offsetPos = findElementPos(document.getElementById(offset));
position[0] = position[0] - offsetPos[0];
}
scrollStart(theScroll,theScroll.scrollLeft,position[0],"horiz");
// return false;
}
function ScrollArrow(direction,toolbar,scrollArea,offset){
toolbarElem = document.getElementById(toolbar);
toolbarNames = new Array();
// Find all the <li> elements in the toolbar,and extract their id's into an array.if (toolbarElem.hasChildNodes()){
var children = toolbarElem.childNodes;
for (var i = 0;
i < children.length;
i++){
if (toolbarElem.childNodes[i].tagName == "LI"){
toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]);
}
}
}
// Now iterate through our array of tab names,find matches,and determine where to go.for (var i = 0;
i < toolbarNames.length;
i++){
if (toolbarNames[i] == currentSection.split("-")[0]){
if (direction == "left"){
if (i - 1 < 0){
gotoTab = toolbarNames[toolbarNames.length - 1];
}
else{
gotoTab = toolbarNames[i - 1];
}
}
else{
if ((i + 1) > (toolbarNames.length - 1)){
gotoTab = toolbarNames[0];
}
else{
gotoTab = toolbarNames[i + 1];
}
}
}
}
// Go to the section name!ScrollSection(gotoTab+paneTag,scrollArea,offset);
}
var scrollanim ={
time:0,begin:0,change:0.0,duration:0.0,element:null,timer:null}
;
function scrollStart(elem,start,end,direction){
//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);
if (scrollanim.timer != null){
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
scrollanim.time = 0;
scrollanim.begin = start;
scrollanim.change = end - start;
scrollanim.duration = 20;
scrollanim.element = elem;
if (direction == "horiz"){
scrollanim.timer = setInterval("scrollHorizAnim();
",15);
}
else{
scrollanim.timer = setInterval("scrollVertAnim();
",15);
}
}
function scrollVertAnim(){
if (scrollanim.time > scrollanim.duration){
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else{
move = sineInOut(scrollanim.time,scrollanim.begin,scrollanim.change,scrollanim.duration);
scrollanim.element.scrollTop = move;
scrollanim.time++;
}
}
function scrollHorizAnim(){
if (scrollanim.time > scrollanim.duration){
clearInterval(scrollanim.timer);
scrollanim.timer = null;
}
else{
move = sineInOut(scrollanim.time,scrollanim.begin,scrollanim.change,scrollanim.duration);
scrollanim.element.scrollLeft = move;
scrollanim.time++;
}
}
function findElementPos(elemFind){
var elemX = 0;
var elemY = 0;
do{
elemX += elemFind.offsetLeft;
elemY += elemFind.offsetTop;
}
while ( elemFind = elemFind.offsetParent )//console.log("Found element "+elemFind+" at "+elemY+"/"+elemX);
return Array(elemX,elemY);
}
function sineInOut(t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
CSS代码(css.css):
@charset "utf-8";html,body,div,ul,li,p,a,span,input{margin:0px;padding:0px;}
body{font-family:Tahoma,Geneva,sans-serif,"宋体";}
.dot{font-size:14px;font-family:"宋体";color:#333333;}
ul,li{list-style:none;}
/*页脚导航*/
#footer{background:#FFF;bottom:0;position:fixed;width:100%;height:54px;}
#footer-content{background:url(../images/fc_bg.jpg) repeat-x;height:54px;width:100%;}
#toolbar{height:100%;list-style:none;margin:0 auto;display:block;width:410px;}
#toolbar li{float:left;display:block;width:82px;height:54px;line-height:54px;text-align:center;}
.inactive{display:block;width:82px;height:54px;float:left;line-height:54px;text-align:center;cursor:pointer;font-size:14px;}
.inactive a{font-size:14px;color:#333333;text-decoration:none;}
#footer .active{background:url(../images/li_bg.jpg) no-repeat;color:#4998fa;display:block;width:82px;height:54px;float:left;line-height:54px;text-align:center;cursor:pointer;}
#footer .active a{font-size:14px;color:#4998fa;text-decoration:none;}
img{border:none;}
#footer li a{display:block;width:82px;height:54px;}
/*省钱好站*/
.page1{width:973px;margin:0 auto;height:100%}
.head{width:900px;height:95px;border-bottom:#e2e2e2 1px solid;margin:0 auto;margin-bottom:27px;position:relative;}
.page1 .content{width:973px;height:426px;}
.title{font-size:30px;font-family:"微软雅黑";padding-top:35px;width:200px;position:absolute;left:0px;}
.page1 ul li{list-style:none;width:139px;height:122px;display:block;float:left;font-size:12px;}
.tu a:hover{background:url(../images/page1/hover.jpg) no-repeat;}
.page1 ul{display:block;width:973px;height:122px;}
.page1 .tu{width:87px;height:87px;margin:0 auto;}
.tu a{display:block;width:87px;height:87px;}
.page1 .bt{width:139px;text-align:center;color:#0063dc;height:21px;line-height:21px;font-size:12px;font-family:"宋体";}
.page1 .fx{width:139px;height:14px;line-height:14px;text-align:center;font-size:12px;font-family:Tahoma,"宋体";color:#66666;}
.page1 .fx span{color:#ff4e00;}
/*品牌推荐*/
.page2{width:900px;height:100%;margin:0 auto;}
.page2 .content{width:900px;height:448px;position:relative;}
.page2 .mask{background:#000;position:absolute;left:0;top:0;}
.page2 .m1{width:160px;height:210px;}
.page2 .m2{width:346px;height:210px;}
/*优惠活动*/
.page3{width:900px;height:100%;margin:0 auto;}
.page3 .content{width:900px;height:468px;position:relative;}
.page3 .mask{position:absolute;background:#000;left:0;top:0;width:444px;height:148px;}
/*热销单品*/
.page4{width:900px;height:100%;margin:0 auto;}
.page4 .content{width:900px;height:380px;position:relative;}
.page4 .mask{position:absolute;background:#000;left:0;top:0;}
.page4 .m1{width:250px;height:250px;}
.page4 .m2{width:120px;height:120px;}
.page4 .item1{display:block;width:250px;height:250px;}
.page4 .item2{display:block;width:120px;height:120px;}
.page4 .item2 .mhover{width:120px;height:20px;background:url(../images/rx/m_bg.png) no-repeat;position:absolute;bottom:0;font-size:12px;font-family:Arial,Helvetica,sans-serif,"宋体";line-height:20px;text-align:center;color:#FFF;display:none;}
.page4 .mhover span{color:#ff0000;font-weight:bold;}
.page4 .item1 .mhover{width:250px;height:40px;background:url(../images/rx/big_bg.png) no-repeat;position:absolute;bottom:0;font-size:20px;font-family:Arial,Helvetica,sans-serif,"宋体";color:#FFF;display:none;}
.page4 .item1 .mleft{width:114px;height:40px;float:left;text-align:right;line-height:40px;padding-right:38px;}
.page4 .item1 .mleft span{color:#ff0000;font-size:30px;font-weight:bold;}
.page4 .item1 .mright{width:97px;height:40px;float:left;line-height:40px;text-align:left;}
.page4 .item1 .mright span{color:#ff0000;font-size:30px;font-weight:bold;}
/*优质网店*/
.page5{width:911px;height:100%;margin:0 auto;}
.page5 .content{width:911px;height:454px;position:relative;}
.page5 .dp{width:452px;height:222px;background:url(../images/dp/dp_bg1.jpg) no-repeat;}
.page5 .dp1{width:452px;height:222px;background:url(../images/dp/dp_bg2.jpg) no-repeat;}
.page5 .wai{width:415px;height:184px;padding:20px 19px;}
.page5 .xinxi{width:415px;height:40px;padding-bottom:14px;}
.page5 .dplogo{width:40px;height:40px;float:left;padding-right:10px;}
.page5 .name{width:365px;height:40px;float:left;}
.page5 .name .bt{width:365px;height:23px;font-size:14px;}
.page5 .name .bt a{font-size:14px;color:#333333;text-decoration:none;}
.page5 .name .bt a:hover{text-decoration:underline;}
.page5 .name .bt span{color:#ff4e00;}
.page5 .zuan{width:365px;height:17px;}
.page5 .tjpic{width:414px;height:130px;}
.page5 .tjpic .tu{width:130px;height:130px;float:left;position:relative;}
.page5 .tu .money{width:60px;height:20px;position:absolute;bottom:5px;right:0px;background:url(../images/dp/money_bg.png) no-repeat;color:#FFF;font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;line-height:20px;}
.page5 .tu .money span{color:#ff0000;font-weight:bold;}
/*搜索*/
.search{width:253px;height:33px;background:url(../images/search_bg.jpg) no-repeat;float:right;margin-top:37px;}
.search .active1{width:36px;height:22px;margin:2px;float:left;display:block;cursor:pointer;padding:8px 0px 0px 7px;background:url(../images/active_bg.jpg) no-repeat;}
.sousuo{width:139px;height:19px;border:none;margin:2px 0px;color:#999999;font-family:"宋体";font-size:12px;padding:5px;float:left;}
.search-button{width:56px;height:33px;float:right;border:none;background:#4998fa;font-size:15px;font-family:"微软雅黑";color:#FFF;cursor:pointer;}
.xiala{width:71px;height:87px;border:#e2e2e2 1px solid;position:absolute;top:74px;left:647px;background:#FFF;display:none;z-index:99999;}
.xiala ul li{display:block;cursor:pointer;clear:both;font-size:12px;}
.xiala .taobao{width:63px;height:19px;padding:10px 0px 0px 8px;}
.xiala .xlogo{width:16px;height:19px;float:left;padding-right:6px;}
.xiala .suning{width:63px;height:22px;padding:7px 0px 0px 8px;}
.xiala .dangdang{width:68px;height:24px;padding:5px 0px 0px 8px;}
/*外套*/
#frame{overflow:hidden;margin:0 auto;width:100%;position:fixed;top:122px;}
#scroller{width:1024px;margin:0 auto;overflow:hidden;}
#content{width:6144px;}
.section{width:1024px;float:left;height:100%;}
.wrapper{position:fixed;top:0px;width:100%;}
.page4 .content a{text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
