在div上实现凸出效果,如图:
代码
css:
*{margin: 0; padding: 0;}
.clickA{
position: relative;
display: inline-block;
*display: inline;
*zoom: 1;
width: 100px;
height: 100px;
box-shadow: 0.3px 0.5px 0.1px 0.1px black;
background-color: #eee;
}
.clickB{
position: relative;
display: inline-block;
*display: inline;
*zoom: 1;
/* width: 100px;
height: 100px;
box-shadow: 0.3px 0.5px 0.1px 0.1px black;
background-color: #FAFAFA;*/
}
.skillImg img{
position: relative;
width: 81px;
height: 78px;
margin: 9px;
}
.skill{
position: relative;
width: 1300px;
height: 200px;
box-shadow: 0.1px 0.5px 0.3px black;
background-color: #eee;
}
html:
<ul class="skillImg">
<li onclick="clickC(1)" id="click1" class="clickA"><img src="img/test1.png" /></li>
<li onclick="clickC(2)" id="click2" class="clickA"><img src="img/test1.png" /></li>
<li onclick="clickC(3)" id="click3" class="clickA"><img src="img/test1.png" /></li>
<li onclick="clickC(4)" id="click4" class="clickA"><img src="img/test1.png" /></li>
<li onclick="clickC(5)" id="click5" class="clickA"><img src="img/test1.png" /></li>
</ul>
<div class="skill">
</div>
js:
var min=1,max=5;
window.onload=clickC;
function clickC(obj){
if(Number(obj)){
min=obj;
}
for(var i=1;i<(max+1);i++){
if(i==min){
document.getElementById("click"+i).className="clickA";
}else{
document.getElementById("click"+i).className="clickB";
}
}
}
也可以在table里实现。效果图:
代码
css:
table{
width: 300px;
height: 200px;
background-color: #EEE0E5;
}
.aa{
background-color: #EEE0E5;
border-top: 1px solid green;
border-left: 1px solid black;
border-right: 1px solid black;
}
.bb{
background-color: #d1d1d1;
/*border-top: 1px solid green;
border-left: 1px solid black;
border-right: 1px solid black;*/
}
html:
<table border="0" cellpadding="20" cellspacing="0">
<tr>
<th class="aa" onclick="bbb(1)" id="ccc1">aa</th>
<th class="aa" onclick="bbb(2)" id="ccc2">aa</th>
<th class="aa" onclick="bbb(3)" id="ccc3">aa</th>
</tr>
<tr>
<td rowspan="3">bb</td>
</tr>
</table>
js:
var min=1;
window.onload=bbb;
function bbb(obj){
if (Number(obj)) {
min=obj;
}
for(var i=1;i<4;i++){
if (i==min) {
document.getElementById("ccc"+i).className="aa";
}else{
document.getElementById("ccc"+i).className="bb";
}
}
}