<!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>
*{
margin:0;
padding:0;
}
#outDiv{
width:200px;
height:320px;
border:1px solid #000;
position:relative;
margin-left:10px;
margin-top:10px;
overflow:hidden;
}
ul{
list-style:none;
}
#ul1{
width:600px;
height:320px;
position:absolute;
}
#ul1 li{
float:left;
}
#ul2{
position:absolute;
}
#ul2 li{
position:absolute;
height:30px;
line-height:30px;
width:160px;
left:0px;
cursor:pointer;
}
.li1{
top:180px;
background-color:#ddd;
}
.li2{
top:210px;
background-color:#ccc;
}
.li3{
top:240px;
background-color:#999;
}
#ul2 li em{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
#ul2 li s{
position:absolute;
height:30px;
line-height:30px;
width:180px;
left:0px;
display:block;
padding-left:20px;
}
.active{
background:url(../1.gif) no-repeat 10px;
background-position:140px;
}
</style>
</head>
<body>
<div id="outDiv">
<ul id="ul1">
<li><img src="img1.jpg" /></li>
<li><img src="img2.jpg" /></li>
<li><img src="img3.jpg" /></li>
</ul>
<ul id="ul2">
<li class="li1">
<em>product1</em>
<s></s>
</li>
<li class="li2">
<em>product2</em>
<s></s>
</li>
<li class="li3">
<em>product3</em>
<s></s>
</li>
</ul>
</div>
<script>
/*
* 仿天猫图片展示效果1，
* 图片规格：320*200；
* ie8，ff，opera中测试可用，其余浏览器未测试；
****made by keimon ****2013-01-08****
*/
var outWidth = $('#outDiv').width();
var innerWidth = $('#innerDiv').width();
var liLen = $('#ul2 li').length;
for(var i=0; i<liLen; i++){
$('#ul2 li').mouseover(function(){
var itemEm = this;
var index = $('#ul2 li').index(itemEm);
var left = outWidth * index;
t = setTimeout(function(){
$('#ul2 li').stop().css('width','160px');
$('#ul2 li').eq(index).stop().animate({'width':'200px'},'slow');
$('#ul2 li s').removeClass('active').css('backgroundPosition','140px');
$('#ul2 li s').eq(index).addClass('active').stop().animate({'backgroundPosition':'180px'},'slow');
},100)
t = setTimeout(function(){
$('#ul1').stop().animate({'left':-left+'px'},'slow');
},99)
})
}
</script>
</body>
</html>
2176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
