*{margin:0padding:0}
body{font-size:14pxfont-family:"Microsoft YaHei"}
ul,li{list-style:none}
#tab{position:relative}
#tab .tabList ul li{
float:left
background:#fefefe
background:-moz-linear-gradient(top, #fefefe, #ededed)
background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed))
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))
border:1px solid #ccc
padding:5px 0
width:100px
text-align:center
margin-left:-1px
position:relative
cursor:pointer
}
#tab .tabCon{
position:absolute
left:-1px
top:32px
border:1px solid #ccc
border-top:none
width:403px
height:100px
}
#tab .tabCon div{
padding:10px
position:absolute
opacity:0
filter:alpha(opacity=0)
}
#tab .tabList li.cur{
border-bottom:none
background:#fff
}
#tab .tabCon div.cur{
opacity:1
filter:alpha(opacity=100)
}
</style>
<div id="tab" style="margin-left:460pxmargin-top:20px">
<div class="tabList">
<ul>
<li class="cur">许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div class="tabCon">
<div class="cur">断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div> <script>
window.onload = function() {
var oDiv = document.getElementById("tab")
var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li")
var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div")
var timer = null
for (var i = 0 i < oLi.length i++) {
oLi[i].index = i
oLi[i].onmouseover = function() {
show(this.index)
}
}
function show(a) {
index = a
var alpha = 0
for (var j = 0 j < oLi.length j++) {
oLi[j].className = ""
aCon[j].className = ""
aCon[j].style.opacity = 0
aCon[j].style.filter = "alpha(opacity=0)"
}
oLi[index].className = "cur"
clearInterval(timer)
timer = setInterval(function() {
alpha += 2
alpha > 100 && (alpha = 100)
aCon[index].style.opacity = alpha / 100
aCon[index].style.filter = "alpha(opacity=" + alpha + ")"
alpha == 100 && clearInterval(timer)
},
5)
}
}
</script>
有没有感觉很酷?其实用jquery实现起来更简单,用fadeIn()和fadeOut()就可以搞定,不知道是不是你想要的结果
点击切换值,这个其实就是修改DOM的innerHTML或是value,
下面是简单的代码实现,仅供参考:
<body><div style="width:100px height:100px border:1px solid #ccc"></div>
</body>
<script type="text/javascript">
var oDiv = document.getElementsByTagName('div')[0]
var arr = [1,2,3,4,5,6,7,8,94,1,3,4,5,6]
oDiv.onclick=function(){
oDiv.innerHTML = arr[Math.floor(Math.random()*arr.length)]
}
</script>