<!DOCTYPE html>
<html>
<head>
<title>换装案例</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#dress{
width: 800px;
margin: 10px auto;
border: 1px solid #F00;
position: relative;
}
h2{
width: 800px;
height: 56px;
background-color: #F00;
line-height: 56px;
text-align: center;
font-size: 30px;
color: #FFF;
letter-spacing: 10px;
}
#person{
height: 550px;
width: 200px;
margin: 40px;
border: 10px solid black;
position: relative;
/* background:url("../img/1.png")no-repeat;*/
}
#pants,#cloth,#hair,#shoes,#bag{
height: 360px;
width: 200px;
position: absolute;
}
#pants{
/* background: url("../img/pants1.png")no-repeat;*/
top: 190px;
left: 12px;
z-index: 1;
}
#cloth{
/* background: url(".png")no-repeat;*/
top: 190px;
left: 12px;
z-index: 2;
}
#hair{
/* background: url(".png")no-repeat;
*/ top: -36px;
left: 18px;
z-index: 3;
}
#shoes{
/* background: url(".png")no-repeat;*/
top: 460px;
left: 34px;
z-index: 4;
}
#bag{
/* background: url(".png")no-repeat;*/
top: 90px;
left: 66px;
z-index: 5;
}
#clothespress{
height: 250px;
width: 400px;
position: absolute;
top: 180px;
left: 300px;
border: 10px solid #ddd;
}
li{
list-style-type: none;
margin: 24px;
}
span{
background-color: #09dcd5;
padding: 8px;
margin: 25px;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
span:hover{
background: #7efffa;
border: 1px solid #CCC;
color: #F00;
}
</style>
<script type="text/javascript">
var cloth1=document.getElementById("cloth1");
var cloth2=document.getElementById("cloth2");
var cloth3=document.getElementById("cloth3");
var pants1=document.getElementById("pants1");
var pants1=document.getElementById("pants2");
var pants1=document.getElementById("pants3");
var hair1=document.getElementById("hair1");
var hair2=document.getElementById("hair2");
var hair3=document.getElementById("hair3");
var shoes1=document.getElementById("shoes1");
var shoes1=document.getElementById("shoes2");
var shoes1=document.getElementById("shoes3");
var bag1=document.getElementById("bag1");
var bag1=document.getElementById("bag2");
var bag1=document.getElementById("bag3");
var pants=document.getElementById("pants");
var cloth=document.getElementById("cloth");
var hair=document.getElementById("hair");
var shoes=document.getElementById("shoes");
var bag=document.getElementById("bag");
cloth1.onclick=function(){
cloth.style.backgroundImage="url('img/cloth1.png')";
cloth.style.top="76px";
cloth.style.left="36px";
};
cloth2.onclick=function(){
cloth.style.backgroundImage="url('img/cloth2.png')";
cloth.style.top="80px";
cloth.style.left="20px";
};
cloth3.onclick=function(){
cloth.style.backgroundImage="url('img/cloth3.png')";
cloth.style.top="86px";
cloth.style.left="-10px";
};
pants1.onclick=function(){
pants.style.backgroundImage="url('img/pants1.png')";
pants.style.top="190px";
pants.style.left="12px";
};
pants2.onclick=function(){
pants.style.backgroundImage="url('img/pants2.png')";
pants.style.top="190px";
pants.style.left="30px";
};
pants3.onclick=function(){
pants.style.backgroundImage="url('img/pants3.png')";
pants.style.top="190px";
pants.style.left="-6px";
};
hair1.onclick=function(){
hair.style.backgroundImage="url('img/hair1.png')";
hair.style.top="-36px";
hair.style.left="18px";
};
hair2.onclick=function(){
hair.style.backgroundImage="url('img/hair2.png')";
hair.style.top="-12px";
hair.style.left="10px";
};
hair3.onclick=function(){
hair.style.backgroundImage="url('img/hair3.png')";
hair.style.top="-12px";
hair.style.left="18px";
};
shoes1.onclick=function(){
shoes.style.backgroundImage="url('img/shoes1.png')";
shoes.style.top="460px";
shoes.style.left="34px";
};
shoes2.onclick=function(){
shoes.style.backgroundImage="url('img/shoes2.png')";
shoes.style.top="80px";
shoes.style.left="20px";
};
shoes3.onclick=function(){
shoes.style.backgroundImage="url('img/shoes3.png')";
shoes.style.top="468px";
shoes.style.left="28px";
};
bag1.onclick=function(){
bag.style.backgroundImage="url('img/bag1.png')";
bag.style.top="90px";
bag.style.left="66px";
};
bag2.onclick=function(){
bag.style.backgroundImage="url('img/bag2.png')";
bag.style.top="148px";
bag.style.left="96px";
};
bag3.onclick=function(){
bag.style.backgroundImage="url('img/bag3.png')";
bag.style.top="200px";
bag.style.left="104px";
};
</script>
</head>
<body>
<div id="dress">
<h2>换装案例</h2>
<div id="person">
<div id="pants"></div>
<div id="cloth"></div>
<div id="hair"></div>
<div id="shoes"></div>
<div id="bag"></div>
</div>
<ul id="clothespress">
<li>上衣：
<span id="cloth1">性感</span>
<span id="cloth2">可爱</span>
<span id="cloth3">时尚</span>
</li>
<li>裤子：
<span id="pants1">小脚</span>
<span id="pants2">牛仔</span>
<span id="pants3">休闲</span>
</li>
<li>头发：
<span id="hair1">马尾</span>
<span id="hair2">卷发</span>
<span id="hair3">自然</span>
</li>
<li>鞋子：
<span id="shoes1">商务</span>
<span id="shoes2">火辣</span>
<span id="shoes3">潮流</span>
</li>
<li>提包：
<span id="bag1">挎包</span>
<span id="bag2">手提</span>
<span id="bag3">布袋</span>
</li>
</ul>
</div>
</body>
</html>
总是点击按钮不出效果，有没有朋友可以帮忙看看哪里出了问题？
