Question

如何用js做简单的页面切换过渡效果

最好求代码！！

Answer 1

<style>
*{margin:0;padding:0;}
body{font-size:14px;font-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:460px;margin-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（）就可以搞定，不知道是不是你想要的结果

Answer 2

一般用css的几个属性可以实现，网上也有很多这样的。transform,animation,学习下拉。还有简单的就是函数slip,JS有滑动的函数可以使用。

Answer 3

什么是页面切换过渡效果，能举个别人网站上的例子吗？

Answer 4

层切换？无缝滚动？