<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
body{
text-align:center;
margin-top:20px;
}
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#outDiv{
margin:0 auto;
overflow:hidden;
background-color:#ccc;
text-align:left;
}
#middle{
position:relative;
height:420px;
}
#middle ul li{
text-align:center;
}
.bg1{
background:url(big_img1.jpg) no-repeat center top;
}
.bg2{
background:url(big_img3.jpg) no-repeat center top;
}
.bg3{
background:url(big_img2.jpg) no-repeat center top;
}
.bg4{
background:url(big_img4.jpg) no-repeat center top;
}
.bg5{
background:url(big_img5.jpg) no-repeat center top;
}
.bg{
display:none;
position:relative;
}
li.active{
display:block;
}
.content{
height:420px;
border:1px solid #000;
margin:0 auto;
position:relative;
}
.imgT{
position:absolute;
text-align:center;
top:-200px;
left:18%;
}
.img_contain{
position:absolute;
right:5%;
top:15px;
}
.img_contain li{
border-bottom:1px solid #ddd;
background-color:#000;
}
li.active_img{
filter:alpha(opacity=80);
opacity:0.8;
}
.num{
position:absolute;
bottom:20px;
left:30%;
}
.num li{
display:inline-block;
width:15px;
height:15px;
background-color:#CCC;
}
li.active_num{
background-color:#990000;
}
#goods_category{
width:240px;
margin-top:10px;
margin-left:10px;
border:1px solid #ddd;
position:fixed;
background-color:#fff;
top:10px;
text-align:left;
left:40px;
z-index:10;
}
.cate h4, .cate ul{
padding-top:5px;
padding-bottom:5px;
padding-left:10px;
}
h4.all_goods{
background-color:#900;
color:#fff;
padding-left:10px;
padding-top:10px;
padding-bottom:10px;
}
.cate li{
display:inline-block;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
color:#666;
}
</style>
</head>
<body>
<div id="outDiv">
<div id="middle">
<ul>
<li class="bg1 bg active">
<div class="content">
<div class="img_top">
<img class="imgT" src="hover_img1.png" />
</div>
<ul class="img_contain">
<li>
<img class="imgR" src="small_img123.jpg" />
</li>
</ul>
</div>
</li>
<li class="bg2 bg">
<div class="content">
<div class="img_top">
</div>
<ul class="img_contain">
<li>
<img src="small_img1.jpg" />
</li>
<li>
<img src="small_img2.jpg" />
</li>
<li>
<img src="small_img3.jpg" />
</li>
</ul>
</div>
</li>
<li class="bg3 bg">
<div class="content">
<div class="img_top">
<img class="imgT" src="hover_img2.png" />
</div>
<ul class="img_contain">
<li>
<img src="small_img1.jpg" />
</li>
<li>
<img src="small_img2.jpg" />
</li>
<li>
<img src="small_img3.jpg" />
</li>
</ul>
</div>
</li>
<li class="bg4 bg">
<div class="content">
<div class="img_top">
</div>
<ul class="img_contain">
<li>
<img src="small_img1.jpg" />
</li>
<li>
<img src="small_img2.jpg" />
</li>
<li>
<img src="small_img3.jpg" />
</li>
</ul>
</div>
</li>
<li class="bg5 bg">
<div class="content">
<div class="img_top">
</div>
<ul class="img_contain">
<li>
<img src="small_img1.jpg" />
</li>
<li>
<img src="small_img2.jpg" />
</li>
<li>
<img src="small_img3.jpg" />
</li>
</ul>
</div>
</li>
</ul>
<ul class="num">
<li class="active_num">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div id="goods_category">
<h4 class="all_goods">所有商品分类</h4>
<dl class="cate">
<dd>
<h4>服装/内衣/配件</h4>
<ul>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
<li>女装</li>
</ul>
</dd>
<dd>
<h4>鞋/箱包</h4>
<ul>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
<li>女鞋</li>
</ul>
</dd>
<dd>
<h4>珠宝饰品/手表眼镜</h4>
<ul>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
<li>珠宝</li>
</ul>
</dd>
<dd>
<h4>化妆品</h4>
<ul>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
<li>护肤</li>
</ul>
</dd>
<dd>
<h4>运动户外</h4>
<ul>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
<li>运动鞋</li>
</ul>
</dd>
<dd>
<h4>手机数码</h4>
<ul>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
<li>手机</li>
</ul>
</dd>
<dd>
<h4>家用电器</h4>
<ul>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
<li>大家电</li>
</ul>
</dd>
<dd>
<h4>家具建材</h4>
<ul>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
<li>灯具</li>
</ul>
</dd>
<dd>
<h4>家纺/居家</h4>
<ul>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
<li>四件套</li>
</ul>
</dd>
<dd>
<h4>母婴玩具</h4>
<ul>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
<li>奶粉</li>
</ul>
</dd>
<dd>
<h4>食品</h4>
<ul>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
<li>零食</li>
</ul>
</dd>
<dd>
<h4>医药保健</h4>
<ul>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
<li>保健</li>
</ul>
</dd>
<dd>
<h4>汽车配件</h4>
<ul>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
<li>汽车</li>
</ul>
</dd>
<dd>
<h4>图书音像</h4>
<ul>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
<li>考试</li>
</ul>
</dd>
<dd>
<h4>文化娱乐</h4>
<ul>
<li>电子凭证</li>
<li>电子凭证</li>
<li>电子凭证</li>
<li>电子凭证</li>
</ul>
</dd>
<dd>
<h4>手机/网游点卡</h4>
</dd>
</dl>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p style="padding-left:300px">end</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script>
/*
* 仿天猫首页-滚动广告和分类列表；
* ie8，ff，opera中测试可用，其他浏览器未测；
* ******made by keimon*********
* *********2013-01-14**********
*/
$(function(){
var len = $('.bg').length;
var i=0;
var timer;
//定时和鼠标移入数字标签时，发生的通用方法
function tongyong(i){
$('.bg').fadeOut('fast');
$('.imgT').animate({top:'-200px'},'fast',function(){
$('.bg').eq(i).fadeIn('fast');
});
$('.imgT').animate({top:'25px'},'slow');
$('.num li').removeClass('active_num');
$('.num li').eq(i).addClass('active_num');
}
//定时发生scroll方法
function scroll(i){
if(i==5){
i=0
}
tongyong(i)
timer = setTimeout(function(){
scroll(i);
},3000)
i++;
}
//调用scroll方法
scroll(i);
//5个数字标签
$('.num li').hover(function(){
clearTimeout(timer);
var that = this;
var index = $('.num li').index(that);
tongyong(index);
},function(){
var that = this;
var index = $('.num li').index(that);
timer = setTimeout(function(){
scroll(index+1);
},3000)
})
//当鼠标移入到content上面时，停止滚动，移出时，继续滚动；
$('div.content').hover(function(){
clearTimeout(timer);
},function(){
var that = this;
var index = $('.content').index(that);
timer = setTimeout(function(){
scroll(index+1);
},3000)
})
//右侧三个img图片
var lens = $('.img_contain li').length;
$('.img_contain li').hover(function(){
var that = this;
$('.img_contain li').addClass('active_img')
$(that).removeClass('active_img');
},function(){
var that = this;
$('.img_contain li').removeClass('active_img')
})
//左侧分类列表
$('dd:odd').css('backgroundColor','#eee');
var scrollT=0;
$(window).scroll(function(e,scrollT){
var scrollTop = $(document).scrollTop();
var scrolls = Math.floor(scrollTop/50);
if(scrolls>15){
scrolls = 15;
}
$('dd ul:lt('+scrolls+')').slideUp();
$('dd ul:gt('+scrolls+')').slideDown();
if(scrolls==0){
$('dd ul').eq(0).slideDown();
}
})
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
